Vue从入门到实战：v-for和v-if一起使用的替代方案
来自CloudWiki
将v-for和v-if一起使用，在渲染列表时，根据v-if指令的条件判断来过滤列表中不满足条件的列表项。
实际上，这个功能也可以使用计算属性来完成。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for与计算属性</title>
</head>
<body>
<div id="app">
<h1>已完成的工作计划</h1>
<ul>
<li v-for="plan in completedPlans">
{{plan.content}}
</li>
</ul>
<h1>未完成的工作计划</h1>
<ul>
<li v-for="plan in incompletePlans">
{{plan.content}}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
plans: [
{content: '写《Vue.js无难事》', isComplete: false},
{content: '买菜', isComplete: true},
{content: '写PPT', isComplete: false},
{content: '做饭', isComplete: true},
{content: '打羽毛球', isComplete: false}
]
},
computed: {
// 计算属性的 getter
completedPlans: function () {
return this.plans.filter(plan => plan.isComplete);
},
incompletePlans: function(){
return this.plans.filter(plan => !plan.isComplete);
}
}
})
</script>
</body>
</html>
Vue.js的作者不建议把v-for和v-if同时用在同一个元素上。
采用计算属性过滤后再遍历，可以获得如下好处：
- 过滤后的列表只会在plan数组发生相关变化时才被重新计算，
- 使用v-for="plan in completedPlans"之后，在渲染的时候只遍历已完成的计划，渲染更高效
- 解耦渲染层的逻辑，可维护性更强。
