vue初试 标签页点击(多选/反选)高亮

效果类似于点击选择标签 首次点击高亮再点击取消 可多选 ；

上代码 templete部分：

 <ol>
          <li v-for="n in 6" :class='{tagActive: checkedTags[n-1]}' v-on:click="changeActive(n-1)">{{tags[n-1]}}</li>
        </ol>

js部分

data(){

 return {
          tripInfo: this.$store.state.trip.tripInfo || null,
        tags: ['', '', '', '', '', ''],
        rate: 4,
        checkedTags: {}

},

methods:{

changeActive (n) {
        this.$set(this.checkedTags, n, !this.checkedTags[n])
      }

}

牵扯到$set的用法  找到的文献，直接拷过来 恩 要让前辈的努力继承下去

受ES5的显示，Vuejs不能检测到对象属性的添加或删除。因为Vuejs在初始化时候将属性转化为getter/setter，所以属性必须在data对象才能让Vuejs转换它，才能让它是响应的，例如：

var data = { a: 1 }
var vm = new Vue({
  data: data
})
// `vm.a` 和 `data.a` 现在是响应的
 
vm.b = 2
// `vm.b` 不是响应的
 
data.b = 2
// `data.b` 不是响应的

不过，有办法在实例创建之后添加属性并且让它是响应的。对于Vue实例，可以使用$set(key,value)实例方法：

vm.$set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的

对于普通数据对象，可以使用全局方法Vue.set(object, key, value):

Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 添加属性。但是，添加到对象上的新属性不会触发更新。这时可以创建一个新的对象，包含原对象的属性和新的属性：

// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

	这里记住Vue.set(object, key, value):  第一个参数是对象  所以在js部分 data里  “checkedTags: {}！！！”