浅谈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 相关文章推荐
js对数字的格式化使用说明
Jan 12 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
JS数组去重详情
Nov 07 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实现把数字ID转字母ID
2013/08/12 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
基于python实现KNN分类算法
2020/04/23 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
毕业生文员求职信
2013/11/03 职场文书
高二化学教学反思
2014/01/30 职场文书
心理健康活动总结
2014/04/30 职场文书
党员创先争优活动总结
2014/05/04 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技