避免 v-if 和 v-for 同时用在一个元素上(性能问题)

92 阅读1分钟

方法一

将数据替换为一个计算属性,让其返回过滤后的列表

<ul v-for='item in activeList'>
  <li>{{item}}</li>
</ul>
computed:function()=>{
	return this.activeList.filter(function (user){
    	return user.isActive
    })
}

方法二

将 v-if 移动至容器元素上

<ul v-if='shouldShowUser'>
  <li v-for='user in users':key='user.id'>
  	{{user.name}}
  </li>
</ul>