vue 循环动态绑定样式

1:html:
ul
        li v-for="(item,index) in icon_list" :key="index"  @click="changeClass(index,item.path)"
          router-link :to="item.path"   :class="{ 'active-class': nowIndex === index }"
            img :src="item.icon" alt=""
            span{{item.text}}/span
          /router-link

        /li
      /ul
2:js:
export default {
  name: 'Partice',
  data () {
    return {
    icon_list:[
              {
                icon: require('@/assets/check_in/有预订icon.png'),
                text: '有预订',
                type: 'ui-picture',
                path:'/check_in/check_in_home'
              },
              {
                icon: require('../../assets/check_in/无预订icon.png'),
                text: '无预定',
                type: 'ui-picture',
                path:''
              },
              {
                icon: require('@/assets/check_in/团队icon.png'),
                text: '团队',
                type: 'ui-picture',
                path:''
              },
              {
                icon: require('@/assets/check_in/会员icon.png'),
                text: '会员',
                type: 'ui-picture',
                path:''
              },
              {
                icon: require('@/assets/check_in/协议icon.png'),
                text: '协议',
                type: 'ui-picture',
                path:''
              },
              {
                icon: require('@/assets/check_in/拼房icon.png'),
                text: '拼房',
                type: 'ui-picture',
                path:''
              }
            ],
            nowIndex: 0,
    }
  },
  methods: {
    changeClass (index) {
      this.nowIndex = index
    }
  }
} 
3:css:
 .active-class {
     span{
       color: #007BDB;
     }
最新回复(0)
/jishu_2BdA_2FTDBB9B3u5iCbkGrdyxAQoUy01o_2FfFJ5sSGj7vk4_3D4488389
8