vue中v-if和v-for指令最好不要同时使用
2024-10-21 03:38:20
建议不要在与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>
将if
指令添加到父级元素上,这可以避免对每个列表项进行条件判断。
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
: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>
最新文章
- 彻底删除MySQL
- JSPatch心得
- 怎么在win7的64位旗舰版上配置coocs2d-x 3.2的android环境并且打包APK
- 网络流最小割 POJ 3469
- Python中__init__方法/__name__系统变量讲解
- OPENGL学习笔记整理(五):着色语言
- PC端 $_SERVER 说明
- hibernate--关联映射(多对一,一对一)
- jquery and event
- Android Fragment基础及使用
- MWEB+七牛 上传图片
- PL/SQL个人学习笔记(二)
- 转: 【Java并发编程】之十七:深入Java内存模型—内存操作规则总结
- java中servletContextListener、httpSessionListener和servletRequestListener使用整理
- [转帖]创建文件或修改文件时间 touch
- C语言博客作业02--循环结构
- BeautifulReport 实现app UI自动化测试
- Scrapy快速上手
- 如何解决海量数据的Top K问题
- C#winform的textbox怎么设置滚动条