vue列表渲染，以及鼠标点击改变样式的问题

在实际项目中，我们进场会遇到鼠标点击该表某个DOM元素的样式，在原生的js或者jquery中，我们会比较熟练的实现这个需求，但是在vue中怎么实现呢？

直接操作DOM？NO!NO!

既然我们的项目使用了vue，为什么还有本末倒置的操作DOM呢，你只要记住vue的核心是什么，这个就容易实现了，比我们操作原生的DOM要容易多；那么怎么操作呢？

废话少说直接上代码：

  <div class="hello">
    <ul>
      <li 
      v-for="(v, index) in list"
      :class="{'active':ind === index}"
      @click="changeBgc(index)">{v}</li>
    </ul>
  </div>

 data () {
    return {
      list: ['苹果', '香蕉', '菠萝', '芒果'],
      ind: '',//如果ind===index,则给active
    }
  },
  methods: {
    //绑定点击事件，参数：当前点击元素序号
    changeBgc: function (index) {
      this.ind = index
    }
  }

上一篇：jquery表单CheckBox的全选跟反选

下一篇：linux配置码云进行git提交