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

 

 

 

Logo

前往低代码交流专区

更多推荐