v-for和v-if一起使用的坑。。。

在vue实际开发中，我们避免不了会使用v-for和v-if来操作数据，但是v-for和v-if同时使用时，有一个先后运行的优先级，v-for比v-if的优先级更高，这就说明在v-for的每次循环运行中每一次都会调用v-if的判断，所以不推荐v-if和v-for在同一个标签内同时使用。

为了避免上述情况的发生，我们通常会采用如下的两种方法：

1>ul和li搭配使用，或者是渲染父级标签下的子标签，可以使用如下方法：

<ul v-if="state">
	<li v-for="(item,id) in list" :key="id"></li>
</ul>

2>可以使用过滤器将v-if中的判断转移到vue的computed的计算属性中，方法如下：

<ul>
	<li v-for="(item,id) in formList" :key="id"></li>
</ul>

//利用vue的计算属性，过滤掉不需要的数据，剩下需要的数据再利用v-for循环遍历取出渲染
computed: {
	formList: function () {
		return this.list.filter(function (item) {
			return item.state
		})
	}
}