Vue的样式绑定-class和style
Vue直接操作数据，当数据改变Vue底层自动渲染dom。当有需要改变dom区域样式的时候 借助于:class和:style以及事件可以实现
class
一.class的对象绑定
:class="{actived: isActived}" 预定义样式 actived 根据事件判断isActived 当isActived为true的时候 使用样式
<!DOCTYPE html>
<html>
<head>
<title>样式绑定</title>
<meta charset="UTF-8" />
<script src="./vue.js"></script>
<style>
.actived{
color:red;
font-size: 20px ;
}
</style>
</head>
<body>
<div id="app" @click="handleDivClick"
:class="{actived: isActived}">
{{content}}
</div>
<script>
var vm = new Vue({
el:"#app" ,
data:{
content:"Hello Vue" ,
isActived:false
},
methods:{
handleDivClick:function() {
this.isActived = !this.isActived ;
}
}
})
</script>
</body>
</html>二.class的数组绑定
:class="[actived]" 此处接收一个数组，里面可以有多个对象 通过事件 actived 与哪个样式匹配就应用哪个样式 实现多套样式间的切换
<!DOCTYPE html>
<html>
<head>
<title>样式绑定</title>
<meta charset="UTF-8" />
<script src="./vue.js"></script>
<style>
.actived-one{
color:red;
font-size: 20px ;
}
</style>
</head>
<body>
<div id="app" @click="handleDivClick"
:class="[actived]">
{{content}}
</div>
<script>
var vm = new Vue({
el:"#app" ,
data:{
content:"Hello Vue" ,
actived:""
},
methods:{
handleDivClick:function() {
this.actived = this.actived === 'actived-one' ? '' : 'actived-one' ;
}
}
})
</script>
</body>
</html>
style(内联样式)
一.style的对象绑定
:style="s_one" 在目标dom标签上
data:{ //在实例的 data预定义样式
s_one:{
color:'black' ,
fontSize:'20px'
}
},
<!DOCTYPE html>
<html>
<head>
<title>样式绑定</title>
<meta charset="UTF-8" />
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div :style="s_one" @click="handleDivClick">
{{content}}
</div>
</div>
<script>
var vm = new Vue({
el:"#app" ,
data:{
content:"Hello Vue" ,
s_one:{
color:'black' ,
fontSize:'20px'
}
},
methods:{
handleDivClick:function() {
this.s_one.color = this.s_one.color === 'black' ? 'red' : 'black' ;
}
}
})
</script>
</body>
</html>二.style的 数组绑定
:style="[s_one,{fontSize:'20px' }]" 数组中多个对象 多套样式
data:{
content:"Hello Vue" ,
s_one:{
color:'black' ,
}
},
<!DOCTYPE html>
<html>
<head>
<title>样式绑定</title>
<meta charset="UTF-8" />
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div :style="[s_one,{fontSize:'20px' }]" @click="handleDivClick">
{{content}}
</div>
</div>
<script>
var vm = new Vue({
el:"#app" ,
data:{
content:"Hello Vue" ,
s_one:{
color:'black' ,
}
},
methods:{
handleDivClick:function() {
this.s_one.color = this.s_one.color === 'black' ? 'red' : 'black' ;
}
}
})
</script>
</body>
</html>