vue简单实现 点击变色和隔行变色

简单实现li点击变色，代码如下

<template>
   <div id="app">
            <ul>
               <!--    通过切换索引值改变class -->
               <li v-for="(item,index) in list"
                   :key="index"
                   @click="changeColor(index)"
                   :class="{active:index == num}"
               >{{item}}
               </li>
            </ul>
</template>
<script>
   export default {
      data() {
         return {
            num: 0,
            list: ['000', '111', '222', '333', '444', '555'] //要循环的数组
         }
      },
      methods: {
         changeColor(index) {
            console.log(index)
            this.num = index   //将li的下标赋值给num
         }
      }
   }
</script>
<!--     样式-->
<style lang="scss" scoped>
   #app {
      font-size: 50px;
      text-align: center;
      
      .active {
         background-color: gray;
         color: red;
      }
   }
</style>

简单实现点击隔行变色，代码如下

<template>
   <div id="app">
      <!--    利用v-for中的index值，绑定样式来实现隔行变色效果 -->
      <ul>
         <!--     键值对 判断条件  -->
         <li v-for="(item,index) in list"
             :key="index"
             @click="changeColor(index)"
             :class="{on:index==num&&index%2==0,off:index==num&&index%2!=0}"
         >{{item}}
         </li>
      </ul>

      <ul>
         <!--      三元运算符写法  -->
         <li v-for="(item,index) in list"
             :key="index"
             @click="changeColor(index)"
             :class="num==index&&index%2 ==0?'on':''||num==index&&index%2 !=0?'off':''"
         >{{item}}
         </li>
      </ul>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            num: 0,
            list: ['000', '111', '222', '333', '444', '555'] //要循环的数组
         }
      },
      methods: {
         changeColor(index) {
            console.log(index)
            this.num = index   //将li的下标赋值给num
         }
      }
   }
</script>
<!--     样式-->
<style lang="scss" scoped>
   #app {
      font-size: 50px;
      text-align: center;

      .on {
         background: gray;
         border: 2px solid red;
      }

      .off {
         background: indigo;
         border: 2px solid blue;
      }
   }

</style>