vue列表渲染，以及鼠標點擊改變樣式的問題

在實際項目中，我們進場會遇到鼠標點擊該表某個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
    }
  }

效果圖

看見了沒有，就是這么簡單哦~~~