vue关于获取目标标签索引

Posted 2020-11-25 hjk1124

需求：通过点击任一标签使其变色

通过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就为真，表现为点击即变色

　　以上。