vue点击添加class,并给奇偶行添加不同的class

在vue中因为没有dome元素，所以动态添加class名不用使用jquery的方法，在这里讲解下vue动态添加的方法：

 <li v-for="(item,index) in navList" :key="item"  :class="[{'nav_left':index%2 != 1},{'nav_right':index%2 != 0},{'nav_active':index==current}]" @click='navClick(index,item);'>{{ item }}</li>

在这里使用的数组的方法，里面嵌套多个对象，

[

    {'nav_left':index%2 != 1},//判断是否为奇行

    {'nav_right':index%2 != 0},//判断是否为偶行

    {'nav_active':index==current}

]

至于第三个class名则是点击改变当前class:

第一：

第二：见上代码，动态绑定，添加判断条件

第三：

下面是这个组件完整代码，有需要可以看看：

<template>
  <ul class="nav" id="nav">
        <li v-for="(item,index) in navList" :key="item"  :class="[{'nav_left':index%2 != 1},{'nav_right':index%2 != 0},{'nav_active':index==current}]" @click='navClick(index,item);'>{{ item }}</li>
    </ul>
</template>

<script>

  export default {
    data () {
      return {
        current:0,
      };
    },
    props:['navList'],
    mounted() {
    },
    methods: {
      navClick(index,item){
        this.current=index;
        this.$emit('navClick',item);
      },
    },

  }

</script>
<style lang='less' scoped>
    .nav{
        padding:0 18%;
        overflow: hidden;
        li{
            font-size:22px;
            padding:10px;
            font-weight: 100;
            color:#4fa8b5;
        }

        li:hover{
          cursor: pointer;
        }
        .nav_active{
            background: url(../../assets/images/nav_act.png) no-repeat center;
            color:#fff;
        }
        .nav_left{
            float:left;
            margin-left:30px;
        }
        .nav_right{
            float:right;
            margin-right:30px;
        }
    }
</style>