常用动态绑定样式:
class
先看下官方文档:
对象语法 :class="{ property : truth }"
动态绑定class,我们可以传给v-bind一个对象,动态切换class
<div id="app" class="active" :class="{show:isShow,hidden:isHidden}">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
isShow:true,
isHidden:false
}
})
</script>
渲染结果:
<div id="app" class="active show"></div>
上边代码,是否给div加上类名show 和 hidden,取决后边返回值,true显示,false隐藏,多个属性中间逗号隔开,动态绑定的class可与普通class共存。
如果动态绑定的class很多,可写在data中,可读性、维护性更优:
<div id="app" class="active" :class="classObject">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
classObject:{
show:true,
hidden:false
}
}
})
</script>
但实际开发中,在复杂场景中,我们更希望用计算属性去监控状态的变化,这里如果用watch代码写起来很臃肿,且watch无缓存:(下边代码别忘了,计算属性classObject要返回一个对象)
<div id="app" class="active" :class="classObject">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:true,
hidden:false
},
computed:{
classObject(){
return {
isShow:this.show,
isHidden:this.hidden
}
}
}
})
数组语法 :class = " [ property1 , property2 , ··· ] " 常用
可以给 :class传一个数组,是一个class类名列表
<div id="app" class="active" :class="[showClass,hiddenClass]">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
showClass:"is-show",
hiddenClass:"is-hidden"
}
})
</script>
数组中的类名也可以根据判断显示:
<div id="app" class="active" :class="[isshow ? 'showClass' : 'hiddenClass']">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
isshow:true
}
})
</script>
渲染结果:
<div id="app" class="active showClass"></div>
上边代码,根据isshow的结果判断显示showClass还是hiddenClass( 通常我会用它做图片切换! )
style
:style="{ styleProperty: property }"
内联样式的动态绑定:属性用驼峰式写法
对象语法:
<div id="app" :style="{color:isColor,backgroundColor:bgColor,fontSize:size + 'px'}">1</div>
<script>
var vm = new Vue({
el:"#app",
data:{
isColor:"red",
bgColor:"#444",
size:30
}
})
</script>
也可以绑定一个样式对象:
<div id="app" :style="styleObject">1</div>
<script>
var vm = new Vue({
el:"#app",
data:{
styleObject:{
color:"red",
backgroundColor:"#444",
fontSize:"30px"
}
}
})
</script>
上边代码写法,回访模板更清晰,明了,可读性更高。
同样绑定对象也可以放在计算属性中去监控。。。