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

Posted 2020-09-20 Ethan

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

直接操作DOM？NO!NO!

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

废话少说直接上代码：

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

 data () {
    return {
      list: [\'苹果\', \'香蕉\', \'菠萝\', \'芒果\'],
      ind: \'\'
    }
  },
  methods: {
    changeBgc: function (index) {
      this.ind = index
    }
  }

效果图

看见了没有，就是这么简单哦~~~