5-Vue Class与Style绑定

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

        

        
        
        

        
        
        

        
        
        

        
        

        
        
        
123
        
        
        
123

//前三个渲染结果：

        var app1 = new Vue({
            el: '#app1',
            data: {
                isActive: true,
                hasError: false
            }
        });
        
        var app2 = new Vue({
            el: '#app2',
            data: {
                classObject: {
                    active: true,
                    textDanger: false
                }
            }
        });
        
        var app3 = new Vue({
            el: '#app3',
            data: {
                isActive: true,
                error: null
            },
            computed: {
                classObject: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            }
        });
        
        //渲染结果：

        var app4 = new Vue({
            el: '#app4',
            data: {
                activeClass: 'active',
                errorClass: 'textDanger'
            }
        });
        
        //渲染结果：

        var app5 = new Vue({
            el: '#app5',
            data: {
                isActive: true,
                activeClass: 'active',
                errorClass: 'textDanger'
            }
        });
        
        var app6 = new Vue({
            el: '#app6',
            data: {
                activeColor: 'red',
                fontSize: 30
            }
        });
        
        var app7 = new Vue({
            el: '#app7',
            data: {
                styleObject: {
                    color: 'red',
                    fontSize: '30px'
                }
            }
        })

image.png