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