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

这是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
    }
  }