vue 动态绑定样式-CFANZ编程社区

常用动态绑定样式：

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>