vue动态添加class/vue点击li列表动态添加class

vue动态添加class/vue点击li列表动态添加class

此案例适合一个元素里面包含多个类，‘menu-item active’:item.id==current，前面单引号的是对应要添加的类名，后面是添加条件。使用场景：列表点击时切换背景色、图片、图标等。

<li v-for="item in nav" :key="item.id"  :class="{ 'menu-item active':item.id==current,'menu-item':item.id!=current}" @click="addactive(item.id)">
        <router-link :to="/home/+item.url">{{ item.navname }}</router-link>
      </li>

<script>
export default {
  name: 'MyAside',
  data () {
    return {
      current: 0,
      nav: [
        { id: 0, url: 'users', navname: '用户管理' },
        { id: 1, url: 'rights', navname: '权限管理' },
        { id: 2, url: 'goods', navname: '商品管理' },
        { id: 3, url: 'orders', navname: '订单管理' },
        { id: 4, url: 'settings', navname: '系统设置' }

      ]
    }
  },
  methods: {
    // 动态添加类
    addactive (index) {
      this.current = index
    }
  }
}
</script>

笔者也是在学习大军中，此仅做笔记方便日后查阅，如有错漏请不吝赐教，非常感谢！