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实现拖拽小图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue3+TypeScript实现Docx/Excel预览组件
这篇文章主要为大家详细介绍了如何使用Vue3+TypeScript实现Docx/Excel预览组件,文中的示例代码讲解详细,有需要的小伙伴可以参考下2024-04-04
今天在做vue和springboot交互的一个项目的时候，想要基于前端实现一些只有登录验证之后才能访问某些页面的操作，所以在这里总结一下实现该功能的一个解决方案2021-10-10
这篇文章主要给大家介绍了在Vue.Js中的$watch()方法的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
这篇文章主要介绍了vue-i18n实现中英文切换的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
关于vue使用ant design vue,打包后a-date-picker控件无法选择日期的问题
这篇文章主要介绍了关于vite .env.test环境使用ant design vue,打包后a-date-picker控件无法选择日期的问题,本文针对这个问题提供了解决方法,需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于Vue简易版无限加载组件实现原理与示例代码的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue Socket.io源码解读，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
我发现好多倒计时的插件，刷新都会变成从头再来，于是自己用vue2.0写了一个，感觉还不错，特此分享到脚本之家平台供大家参考下2017-03-03
这篇文章主要介绍了 Vue 页面跳转不用router-link的实现代码，文中给大家介绍了vue router-link跳转传值示例,需要的朋友可以参考下2018-04-04
最新评论