vue Class与Style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class

• 对象语法
• 数组语法

绑定内联样式Style

• 对象语法
• 数组语法

下面是代码

    
        
        
        
        
    

    

        

            
            对象语法
            


            

            

            


            


            

                数组语法
            

            

                数组里使用三元表达式
            

            
                这是个自定义控件，自定义控件上的添加的类会加载到子控件上。
            

            
            

                这里是是对象语法绑定style
            

            

                对象绑定style
            

            
            

                数组绑定style
            

            

                数组里使用三元表达式绑定style
            

            

        

        

    

运行效果：

Class与Style绑定.png

变量值更换请自行操作

参考：
vue.js Class与Style绑定

更新时间: 2018-07-19