vue--点击当前增加class,其他删除class
{{data.data}}new Vue({el: '#app',data: {datas: {data1: {data: "测试1",ifAdd: 0},data2: {data: "测试2",ifAdd: 1},data3: {data: "测试3",ifAdd: 2}},qwerqwre:"0"},
·
<template>
<div>
<p
v-for="(item,key,index) in datas"
:key="index"
@:click="singleCheck(item,index)"
v-bind:class="{'checked-classs':item.checked}"
>{{item.data}}</p>
</div>
</template>
<script>
export default {
data() {
return {
datas: {
data1: {
data: "测试1",
checked: true
},
data2: {
data: "测试2",
checked: false
},
data3: {
data: "测试3",
checked: 测试2
}
}
};
},
methods: {
singleCheck(item, index) {
if (item.checked) {
return;
}
this.datas.forEach(t => (t.checked = false));
item.checked = true;
this.datas.splice(index, 1, item);
}
}
};
</script>
<style scoped>
.checked-classs {
color: red;
}
</style>
更多推荐
已为社区贡献7条内容
所有评论(0)