修改元素的类列表

目前有一个圆圈图像类，以及一个单选框：

<input type="checkbox"/>
<div class="circle">Hi!</div>

若想实现选中单选框时， 为圆圈添加 purple 类来应用css中变成紫色的样式，应该有两步：

• 将 input 标签的值绑定到 isPurple 数据上

<input type="checkbox" v-model="isPurple" />

• 若 isPurple 值为真，则将 purple 类添加到圆圈上

<div class="circle" :class="{ purple: isPurple}">Hi!</div>

这里的 { purple: isPurple} 是一种条件表达式，只有当后者为真时，才会返回前者。

多类添加

上面只能添加一个类，并且很长，我们可以使用computed 方法组 来实现：

computed: {
    classes_purple() {
        return {
            purple: this.isPurple
        }
    }
}

此时在html中将原来的条件表达式改成计算属性值就行。

对于需要添加多个类时，可以使用 []:

<div class="circle" :class="[SelectClasses, classes_purple]">
	Hi!
</div>

对应的 computed 方法组：

computed: {
    classes_purple() {
        return {
            purple: this.isPurple
        }
    },
    SelectClasses() {
        return this.SelectClasses
    }
}