美文网首页让前端飞前端架构技术干货
理解vue中if和for指令不能同时使用

理解vue中if和for指令不能同时使用

作者: 前端精髓 | 来源:发表于2019-03-30 21:51 被阅读2次

建议不要在与v-for相同的元素上使用v-if。因为v-for指令的优先级高于v-if当它们处于同一节点。v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。

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

如果需要在列表中过滤掉不需要的某一项,建议使用计算属性。

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

if指令添加到父级元素上,这可以避免对每个列表项进行条件判断。

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

相关文章

  • 理解vue中if和for指令不能同时使用

    建议不要在与v-for相同的元素上使用v-if。因为v-for指令的优先级高于v-if当它们处于同一节点。v-fo...

  • vue在IE9中报错解决办法

    一.指令v-for不能使用 二.methods 中的方法不能使用 三.node构建的vue项目(babel 转码)...

  • 聊聊对vue的一些理解

    vue理解浅谈 一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点...

  • vue自定义指令jsx语法

    vue中自定义指令使用jsx语法实现

  • vue directives指令总结

    Vue指令和Vue组件之间的关系 很多时候,对于初学者来说,看完指令的使用会发现组件的使用和指令的自定义有几分相似...

  • vue 指令

    Vue.js [TOC] 指令 表达式的值除了可以出现内容中,也可以使用在其它位置,比如:属性。但是不能使用 {{...

  • Vue 指令的自定义

    我们可能需要先知道的 Vue 中自带默认指令(v-if 和 v-show 等),我们在使用 Vue 框架的时候,这...

  • 理解条件渲染 | 重学Vue3

    这个月开始重新开始学习Vue3,从理解基本使用到模拟实现! 本文是关于Vue的条件渲染指令:v-if和v-show...

  • Vue 增删改查

    此demo选用的vue2.x版本看完你将收获以下几点技能: 快速创建vue项目 理解vue常用指令的使用场景 网站...

  • React学习之——条件渲染(个人笔记)

    React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 J...

网友评论

    本文标题:理解vue中if和for指令不能同时使用

    本文链接:https://www.haomeiwen.com/subject/sscebqtx.html