浅谈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 布尔型分析
Dec 22 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
js格式化时间小结
Nov 03 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
vue.js学习之递归组件
Dec 13 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 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和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
七年级生物教学反思
2014/01/30 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
商务日语专业自荐信
2014/04/17 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
婚前协议书范本
2014/10/27 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
春季运动会加油词
2015/07/18 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python