vue动态绑定class

288 阅读1分钟

	<template>
      <div class="content">
        <div v-for="(item,index) in msg" :key="index"
        @click="tap(index)"
        class="content-item"
        :class="{'active':activeIndex==index}">
          <div>{{item}}</div>
        </div>
      </div>
    </template>

    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          activeIndex: 0,
          msg:["资金明细", "提现记录", "押金记录"]
        }
      },
      methods:{
        tap(index){
          this.activeIndex = index;
        }
      }
    }
    </script>
    
    <style scoped>
      .active{
        color: #42b983;
      }
    </style>