浅谈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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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 分页类 扩展代码
2009/06/11 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
Python类的基础入门知识
2008/11/24 Python
python图片验证码生成代码
2016/07/02 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python中加背景音乐如何操作
2020/07/19 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
java程序员面试交流
2012/11/29 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
社区学习十八大感想
2014/01/22 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
仲裁协议书
2014/09/26 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
金砖之国观后感
2015/06/11 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers
使用Apache Camel表达REST服务的方法
2022/06/10 Servers