标签：样式 rip color 添加 his current 列表 under -o
需求：通过点击任一标签使其变色
通过v-for渲染列表，通过v-bind绑定class样式， 通过v-on绑定点击事件，添加参数index，与v-for的index参数一致，当点击某项时，将current赋值给index 使得current===index成立，这样，Rcolor就生效了
style
.Rcolor {
color: red;
}
html
<div id="app"> <ul> <li v-for=‘(item,index) in arr‘ @click=‘getRed(index)‘ :class="{Rcolor:index===current}">{{index}}-{{item}}</li> <!-- Rcolor当索引等于current时，为真，Rcolor就为真 --> </ul> </div>
js
<script src="vue.js"></script> <script> const app = new Vue({ el: "#app", data: { arr: [‘one‘, ‘two‘, ‘three‘, ‘four‘], current: -1 }, methods: { getRed(index) { this.current = index console.log(this.current, ‘current‘); } } }) </script>
要注意的：
1. 若想让第一个默认变色，将current初始值为0，如果想页面初次渲染时任一标签都不变色，current初始值不能是index范围内的值
2. {Rcolor:index===current} ： 如果index === current ，就为真，Rcolor就为真，通过点击事件将 当前index赋值给当前current，这个表达式就为真，Rcolor就为真，表现为点击即变色
以上。
标签：样式 rip color 添加 his current 列表 under -o
原文地址：https://www.cnblogs.com/hjk1124/p/12242438.html
