vue循环点击当前元素变色,vue点击改变颜色

　　本文主要介绍Vue实现点击当前行改变颜色。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享Vue点击当前行改变颜色的具体代码，供大家参考。具体内容如下

　　话不多说，先得效果。

　　第一行默认为红色，点击第二行时，只有第二行变成红色。

　　代码如下：

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　标题标题/标题

　　风格。活动{

　　颜色：红色；

　　}

　　/风格

　　/头

　　身体

　　div id=应用程序

　　保险商实验所

　　 li v-for=(item，index)in names :class= { active:current index===index } @ click= Li click(index) { { item } }/Li

　　/ul

　　/div

　　！-介绍Vue -

　　脚本src= vue . js /脚本

　　脚本

　　const app=new Vue({

　　埃尔： #app ，

　　数据：{

　　姓名：[小乔，萧声，小南]，

　　当前索引：0

　　},

　　方法：{

　　Li单击(索引){

　　this.currentIndex=索引

　　}

　　}

　　})

　　/脚本

　　/body

　　/html

　　vue.js的学习教程请点击专门的vue.js组件学习教程和Vue.js前端组件学习教程进行学习。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。