利用数组标记v-if（v-show）不响应的问题

问题描述

近遇到一个问题，我想用一个数组里的值来标记v-if,例以下面代码所示。根据数组里面的值来使v-if所控制的标签展现或消失，可是发现改变flagList里面的值后页面不会实时的响应。（若是用变量非数组来控制则不会存在这个问题）

<p v-if="flagList[0]"> hello </p>
<p v-if="flagList[1]"> hello </p>
<p v-if="flagList[2]"> hello </p>

解决方案

change(index){
	//无效操做
    this.flagList[index] = !flagList[index]
    //有效操做
    Vue.set(this.flagList,index,!this.flagList[index])
    this.$set(this.flagList,index,!this.flagList[index]) //和上面等价
}

因此，要使用vue专门提供的函数改变数组里面的值，才能使v-if所控制的标签进行改变。