浅谈v-for 和 v-if 并用时筛选条件方法


Posted in Javascript onNovember 07, 2019

如下所示:

浅谈v-for 和 v-if 并用时筛选条件方法

<ul id="ul">
<li v-for="todo in todos" v-if="todo<4">
 {{ todo }}
</li>
 
</ul>
 
<script> 
 
varvm=new Vue({
el:"#ul",
data:{
 todos: [ 1, 2, 3, 4, 5 ]
}
})
 
</script>

说明:在处于同一节点的时候,v-for 优先级比 v-if 高。先运行v-for 的循环,然后在每一个v-for 的循环中,再进行 v-if 的条件对比。

v-if="todo<4" 会筛选 符合 <4 的 todo 项

浅谈v-for 和 v-if 并用时筛选条件方法

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

<ul id="ul" v-if="todos.length">
<li v-for="todo in todos">
 {{ todo }}
</li>
<p v-else>
no todo left!
</p>
</ul>
 
 
<script> 
 
varvm=new Vue({
el:"#ul",
data:{
 todos: [ 1, 2, 3, 4, 5 ]
   }
})
 
</script>

以上这篇浅谈v-for 和 v-if 并用时筛选条件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 #Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 #Javascript
vue改变循环遍历后的数据实例
Nov 07 #Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 #Javascript
vue v-for直接循环数字实例
Nov 07 #Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 #Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 #Javascript
You might like
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python通过future处理并发问题
2017/10/17 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
python创建学生管理系统
2019/11/22 Python
numba提升python运行速度的实例方法
2021/01/25 Python
天游软件面试
2013/11/23 面试题
公司清洁工岗位职责
2013/12/14 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
2016新年晚会开场白
2015/12/03 职场文书
《绝招》教学反思
2016/02/20 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Nginx缓存设置案例详解
2021/09/15 Servers