<template>
<div>
<ul class="navText">
<li
v-for="(item, index) in navlist"
:class="index == currentIndex ? 'navcolor' : ''"
:key="index"
@click="changeColor(index)"
>
{{ item.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
navlist: [
{ title: "主页" },
{ title: "技术分享" },
{ title: "分享生活" },
{ title: "关于我" },
],
// 当前颜色
currentIndex: 0,
};
},
methods: {
// 点击改变文字颜色
changeColor(index) {
this.currentIndex = index;
},
},
};
</script>
<style lang="less" scoped>
.navcolor {
color: red;
}
</style>
vue中用v-for循环数组,如何实现点击文字切换颜色效果
最新推荐文章于 2023-09-13 16:19:31 发布
关键词由CSDN通过智能技术生成