vue關於獲取目標標簽索引

需求：通過點擊任一標簽使其變色

通過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就為真，表現為點擊即變色

　　以上。