Vue样式绑定

样式动态修改（两种方式）

• 通过修改class属性
• 通过修改style属性

通过class属性

通过修改class属性的类名来更改样式

• 对象写法

// key就是类名
<view class="box" :class="{'bg-red': isRed}"></view>

export default {
    data() {
        return {
            title: 'Hello',
            isRed: true
        }
    },
    methods: {
        changeColor(){
            this.isRed = !this.isRed;
        }
    }
}

• 数组写法

// 数组元素变量对应的值就是类名
<view class="box" :class="[errorClass,activeClass]"></view>

export default {
    data() {
        return {
            errorClass: 'error',
            activeClass: 'active
        }
    },
    methods: {
        changeColor(){
            this.errorClass = '';
        }
    }
}

• 注意事项

1、对象与数组可以混合使用（数组包对象）
2、如果有多个class类名，写法如何更加优雅？（推荐）

<view class="box" :class="objClass"></view>

export default {
    data() {
        return {
            objClass: {
                active: true,
                error: false
            }
        }
    },
    methods: {
        changeColor(){
            this.isRed = !this.isRed;
        }
    }
}

3、默认类名如何处理
<view class="box" :class="[errorClass,activeClass]"></view>