码迷,mamicode.com
首页 > 其他好文 > 详细

v-if和v-for谁的优先级高?如何同时使用?

时间:2019-12-26 11:28:53      阅读:894      评论:0      收藏:0      [点我收藏+]

标签:一个   dshow   元素   color   active   use   避免   替换   计算属性   

首先:永远不要把 v-if 和 v-for 同时用在同一个元素上

其次:当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级

1.过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下,请将 users替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。

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

换成:
<ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } }

 

2.避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下,请将 v-if 移动至容器元素上 。

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

更新为:

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

v-if和v-for谁的优先级高?如何同时使用?

标签:一个   dshow   元素   color   active   use   避免   替换   计算属性   

原文地址:https://www.cnblogs.com/qlongbg/p/12100851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!