VUE如何实现点击文字添加颜色(动态修改class)

更新时间：2023年11月16日 09:38:36 作者：前端李小白

这篇文章主要介绍了VUE如何实现点击文字添加颜色(动态修改class),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue点击文字添加颜色(动态修改class)

实现的原理很简单，只需要动态绑定一个class就可以了，现在分别列出三种情况

1.点击文字颜色改变

再次点击，点击的颜色改变，之前的颜色变回原来的颜色

代码如下：

<template>
  <div class="list2">
    <ul>
      <li
        v-for="(item,index) in List"
        :key="index"
        :class="{activeColor:colorIndex===index}"
        @click="changeColor(item,index)"
      >
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  name: "list",
  components: {},
  data() {
    return {
      List: [
        { name: "总的" },
        { name: "部分1" },
        { name: "部分2" },
        { name: "部分3" }
      ],
      colorIndex: -1
    };
  },
  mounted() {},
  methods: {
    changeColor(item, index) {
      this.colorIndex = index;
    }
  }
};
</script>


<style lang="less" scoped>
.list2 {
  width: 100px;
  ul {
    list-style: none;
    .activeColor {
      background-color: #f6fbff;
      color: #298adb;
    }
    li {
      cursor: pointer;
    }
  }
}
</style>

效果如下，当我点击其中某一个文字的时候，字体的颜色就改变了

2.如果需要点击多个变颜色的话

再次点击取消的话，我是这样做的，给data里面的对象添加一个属性，全部设置为false，然后点击的时候设置为true，

代码如下：

<template>
  <div class="list2">
    <ul>
      <li
        v-for="(item,index) in List"
        :key="index"
        :class="{activeColor:item.active}"
        @click="changeColor(item,index)"
      >
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "list",
  components: {},
  data() {
    return {
      List: [
        { name: "总的" },
        { name: "部分1" },
        { name: "部分2" },
        { name: "部分3" }
      ],
      colorIndex: -1
    };
  },
  mounted() {
      this.addActive()
  },
  methods: {
      /*给List的每一个对象添加active属性，需要用到this.$set（'对象','键值','value'） */
      addActive(){
        this.List.forEach(item=>{
            this.$set(item,'active',false)
        })
      },
    changeColor(item, index) {
      if(!item.active){
         item.active = true
      } else {
          item.active = false
      }
    }
  }
};
</script>

<style lang="less" scoped>
.list2 {
  width: 100px;
  ul {
    list-style: none;
    .activeColor {
      background-color: #f6fbff;
      color: #298adb;
    }
    li {
      cursor: pointer;
    }
  }
}
</style>

效果如下：点击多个文字可以改变样式，再次点击可以取消

3.有时候我们要是有个‘总的’

那个点击‘总的’，就不能有部分的存在了，点击部分就不能有‘总的’存在

代码如下：

<template>
  <div class="list2">
    <ul>
      <li
        v-for="(item,index) in List"
        :key="index"
        :class="{activeColor:item.active}"
        @click="changeColor(item,index)"
      >
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "list",
  components: {},
  data() {
    return {
      List: [
        { name: "总的" },
        { name: "部分1" },
        { name: "部分2" },
        { name: "部分3" }
      ],
      colorIndex: -1
    };
  },
  mounted() {
    this.addActive();
  },
  methods: {
    /*给List的每一个对象添加active属性，需要用到this.$set（'对象','键值','value'） */
    addActive() {
      this.List.forEach(item => {
        this.$set(item, "active", false);
      });
    },
    changeColor(item, index) {
      if (index === 0) {
        this.List.forEach(item => {
          item.active = false;
        });
      } else {
        this.List[0].active = false;
      }
      if (!item.active) {
        item.active = true;
      } else {
        item.active = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.list2 {
  width: 100px;
  ul {
    list-style: none;
    .activeColor {
      background-color: #f6fbff;
      color: #298adb;
    }
    li {
      cursor: pointer;
    }
  }
}
</style>

效果如下，点击‘总的’话，部分会全部不变，点击‘部分’，全部会不变

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue项目element-ui级联选择器el-cascader回显的问题及解决
这篇文章主要介绍了vue项目element-ui级联选择器el-cascader回显的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
解决Vue数据更新了但页面没有更新的问题
在vue项目中,有些我们会遇到修改完数据,但是视图却没有更新的情况,具体的场景不一样,解决问题的方法也不一样,在网上看了很多文章,在此总结汇总一下,需要的朋友可以参考下
2023-08-08
vue.js实现刷新当前页面的方法教程
这篇文章主要给大家介绍了关于vue.js实现刷新当前页面的方法教程，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
2017-07-07
vue操作select获取option值方式
文章介绍了在Vue中操作select元素并实时获取选中的option值的方法,通过使用`@change`事件并传递参数,可以实现动态获取选中的值
2025-01-01
vue项目前端加前缀(包括页面及静态资源)的操作方法
这篇文章主要介绍了vue项目前端加前缀(包括页面及静态资源)的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
Vue.js集成Word实现在线编辑功能
在现代Web应用中,集成文档编辑功能变得越来越常见,特别是在协作环境中,能够直接在Web应用内编辑Word文档可以极大地提高工作效率,本文将详细介绍如何在Vue.js项目中集成Word在线编辑功能,需要的朋友可以参考下
2024-08-08
Vue3中Hooks封装的技巧详解
这篇文章主要来和大家分享一些关于 Vue3中Hooks封装的技巧,希望能够为大家在 Vue 3 项目中更好地利用 Hooks 提供一些思路和实践经验
2023-12-12
Vue3封装实现右键菜单组件
这篇文章主要为大家详细介绍了Vue3封装实现右键菜单组件的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下
2025-02-02
VueX学习之modules和namespacedVueX详细教程
这篇文章主要为大家介绍了VueX学习之modules和namespacedVueX详细教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
基于Vuejs实现购物车功能
这篇文章主要为大家详细介绍了基于Vuejs实现购物车功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08