在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>
