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

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

我最初的想法是直接操作dom，即在鼠标点击该表某个DOM元素之后，取到event.target，然后给它添加class，但是遇到一个问题就是想一开始进入页面就给列表中的第一个元素添加上样式，但是在created和mounted方法中取dom竟然死活取不到，不知道是dom结构写的有问题还是循环列表还没有渲染出来的问题

直接操作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    }  }

效果图

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