v-for与v-bind结合使用

    <script src="../vue.js"></script>
    <style>
        .active {
            color: red;
        }
    </style>

    <div id="app">
        <ul>
            <li v-for="(item,index) in dataObj" :key="index" 
                        :class="{active:index == thisIndex}"@click="getIndex(index)">

                {{index+"------- "+ item}}

            </li>
        </ul>
        <!-- 三元表达式 -->
        <ul>
            <li v-for="(item,index) in dataObj" :key="index" 
                        :class="thisIndex == index?'active':''"@click="getIndex(index)">

                {{index+"------- "+ item}}

            </li>
        </ul>
        <!-- 数组 -->
        <ul>
            <li v-for="(item,index) in dataObj" :key="index"                 
                                      :class="gudgeIndex(index)"@click="getIndex(index)">
  
                {{index+"------- "+ item}}

            </li>
        </ul>
    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    thisIndex: 0,
                    dataObj: ["海王", "海贼王", "火影忍者", "复仇者联盟"],
                }
            },
            methods: {
                gudgeIndex(index){
                    return {active:index == this.thisIndex};
                },
                getIndex(index) {
                    this.thisIndex = index;
                }
            }
        })
    </script>

1、现动态遍历dataObj数组。

2、获取每个li的索引。

3、进行判断，符合条件的添加active类。