vue--点击当前增加class，其他删除class

大刘鸭

于 2017-02-17 16:36:44 发布

阅读量3.2w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue class

本文链接：https://blog.csdn.net/xiao_yu_liu/article/details/55515244

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用Vue.js实现列表项的单选效果，通过@click事件监听和v-bind动态绑定class样式来改变被选中项的显示样式，并利用data属性记录各列表项的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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