Vuejs2 在选中时将类添加到复选框

我的数据：

products: {
    'price': [],
    'in_stock': [],
},

我有一些复选框在同一型号上运行：

 <input type="checkbox" id="price-0" value="0" v-model="products.price">
 <label for="price-0">Studio</label>
 <input type="checkbox" id="price-1" value="1" v-model="products.price">
 <label for="price-1">Studio</label>
 ....

演播室
演播室
....

---

选中（并取消选中）后，如何将类添加/删除到复选框中？

以下是一种方法。如果在v-for循环中呈现输入，那么执行类似于

item.id

的操作来替换

data-0

data-1

等的每个实例将非常简单

如果您想使用代码，这里还有一个示例

Vue.component（'my-cool-component'{
模板：“#酷”，
数据（）{
返回{
产品：{
“价格”：[]，
“库存”：[]，
},
香港国际电脑学会：[]，
}
},
方法：{
选择（id）{
this.isChk.includes（id）？this.isChk.splice（this.isChk.indexOf（id），1）：this.isChk.push（id）
}
}
});
const app=新的Vue({
el:“#应用程序”
});
。已选中{
颜色：#fff；
背景#f82c00；
填充：4px；
边界半径：3px；
}
.产出{
填充：1px15px；
背景：#413e3e；
颜色：#fff；
利润率：23px 5px；
边界半径：6px
}

演播室
演播室
价格--{products.price}

已选中--{isChk}

在Vue中，最好以声明方式处理动态样式。这样，您就可以利用sweet反应式绑定，它可以根据数据更改自动更新它们

像这样的东西可以做到：

<input type="checkbox" id="price-0" value="0" v-model="products.price" :class="{'checked-class' : products.price === 0}">
 <label for="price-0">Studio</label>
 <input type="checkbox" id="price-1" value="1" v-model="products.price"
    :class="{'checked-class' : products.price === 1}">
 <label for="price-1">Studio</label>


演播室
演播室

参考：