Vue 数据绑定事件绑定样式绑定语法示例

// 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>