vue的注意规范之v-if 与 v-for 一起使用教程


Posted in Javascript onAugust 04, 2019

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中

所以,不推荐v-if和v-for同时使用

使用推荐方式:

<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<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>

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:

<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>

上面的代码只传递了未完成的 todos。

而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。如:

<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>

总结

以上所述是小编给大家介绍的vue的注意规范之v-if 与 v-for 一起使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
vue v-for 使用问题整理小结
Aug 04 #Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 #Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 #Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 #Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 #Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 #Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
Django的分页器实例(paginator)
2017/12/01 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Python实现翻转数组功能示例
2018/01/12 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python实现加密的方式总结
2020/01/19 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
计算机专业毕业生自荐书
2014/06/02 职场文书
建筑工地标语
2014/06/18 职场文书
客服专员岗位职责
2015/02/10 职场文书
小学生交通安全寄语
2015/02/27 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
学校教代会开幕词
2016/03/04 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
如何自己动手写SQL执行引擎
2021/06/02 MySQL
Python Matplotlib库实现画局部图
2021/11/17 Python
linux下安装redis图文详细步骤
2021/12/04 Redis