如题,我们要实现的是效果是,点击li,给当前点击liactive

用过jquery的都知道这个很简单嘛

<ul class='list'>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
$(".list li").click(function(){
    if($(this).hasClass("active")){
        $(this).removeClass("active")
    }else{
        $(this).addClass("active").siblings().removeClass("active")
    }
})

但是vue该怎么写呢

<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<ul class="list-wrapper" id="app">
  <li v-for=" (item,color) in colorArr" :key='color' class="list-item" :class="item.name" :id="active==color?'active':false" @click='toggle(color,item.name)'></li>
</ul>

new Vue({
  el: '#app',
  data: {
    active:0,//用来标识那个加class
    colorArr:[//用来循环的数据
        {
          name:"red"
        },{
          name:"indianred"
        },{
          name:'pink'
        },{
          name:"gold"
        },{
          name:"black"
        },{
          name:"green"
        },{
          name:"Crimson"
        },{
          name:"Magenta"
        },{
          name:"Purple"
        },{
          name:"DeepSkyBlue"
        },{
          name:"Cyan"
        },{
          name:"Teal"
        }
      ]
  },
  methods:{
      // 点击添加active
      toggle(index,val){
          this.active=index;
          this.dataObj.color=val;
      }
  }
})
#active {
  border: 3px solid #222;
}

这里需要说一下,因为我使用的是id=> #active效果和class是一样的

这里我为什么用id呢,是因为我前面已经使用了:class,所以后面我就给改成了id,建议,如果你只是需要加一个class的话建议使用class选择器

the end


扫描二维码,在手机上阅读!