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 相关文章推荐
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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环境――Appserv
2006/12/13 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
详解Python中的array数组模块相关使用
2016/07/05 Python
Python实现的矩阵类实例
2017/08/22 Python
点球小游戏python脚本
2018/05/22 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python绘制简单彩虹图
2018/11/19 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
实习自我鉴定
2013/12/15 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
python实现双向链表原理
2022/05/25 Python