filter vue 循环_vue v-for中使用filter筛选数据

最新推荐文章于 2022-11-30 19:18:27 发布
最新推荐文章于 2022-11-30 19:18:27 发布
阅读量1.6k 收藏
点赞数
文章标签： filter vue 循环
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35915828/article/details/115063822
版权

遍历的时候筛选IsUse为true的数据，我这么写问题在哪？为什么加上以后页面上一条数据都没有，去掉filter就有数据了

1ddabf4f030234c5fbfed350012e2c50.png

加上filter

{{item.RouteName}}{{item.CodeType}}{{item.PointCodeStartId}}{{item.CodeFirStart}}{{item.CodeIcaoStart}}{{item.PointCodeEndId}}{{item.CodeFirEnd}}{{item.CodeIcaoEnd }}{{item.DirecDescription}}

5df9f24e8ff6cc48af01687c364de514.png

去掉filter

{{item.RouteName}}{{item.CodeType}}{{item.PointCodeStartId}}{{item.CodeFirStart}}{{item.CodeIcaoStart}}{{item.PointCodeEndId}}{{item.CodeFirEnd}}{{item.CodeIcaoEnd }}{{item.DirecDescription}}

703cb87dea6731c865c214b23908bb61.png

贺定圆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2.0 v-for filter列表过滤功能的实现
10-18
今天小编就为大家分享一篇Vue2.0 v-for filter列表过滤功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue filter-v-for 使用
weixin_30409849的博客
08-21 616
var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pep...
Vue总结（程序员卷土重来的第一天（第二篇））
weixin_45895314的博客
09-10 75
Vue指令（内置指令） 1.{{}} 插值表达式 2.v-text 3.v-html 能够识别标签 4.{{}} v-text v-html 都可以向页面插入数据，v-text v-html 会将标签内的数据覆盖，{{}}使用更加方便 ，但是会出现闪烁问题 5.v-cloak 可以解决{{}}产生的闪烁问题 v-for 循环 1.数循环普通组 循环对象数组 循环对象 循环数字 2.与v-for 配合使用的key属性 ----维护状态 3.当 Vue 正在更新使用 v-for 渲染
Vue2.0 v-for filter
weixin_34175509的博客
02-22 650
Vue2.0 v-for filter列表过滤功能 习惯使用angularjs的一定知道angularjs有一个ng-repeat filter的例子，可以很简单的过滤一个循环列表。而在使用VUE2.0的时候发现不能在v-for中使用filter功能。所以这里就来讨论一下如何实现这个列表过滤功能。 解决思路使用计算属性 使用计算属性app...
Vue：过滤器filter的使用方式
彭世瑜的博客
04-07 1015
app.vue <template> <div> <template v-for="item in list"> <div> <span>{{item.name}}</span> <span> - </span> <span>{{item.role | roleValueToLabel}}</span> &
Vue详解（三）过滤器
sunnygao的博客
12-12 2361
文章目录Vue详解（三）过滤器1.全局过滤器的使用1.1将所有的字母变成大写。1.2 定义格式化时间的全局过滤器1.3 过滤器在v-for中的使用1.4. 可以连续使用多个过滤器。2.私有过滤器的使用 Vue详解（三）过滤器 ​ 过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结构的简单的函数。在实际项目开发中根据实际需求，可以自己编写所需要的过滤器。 ​ 过滤器经常用在数据所需的格式化时使用： 字符串格式化。 日期时间的格式化。 例如：12.12.2050-10.10.10表示2050
条件渲染（v-if、v-show）、列表渲染（v-for）、列表中key的原理和作用、列表过滤（filter）、列表排序（sort）
Code Writers
11-30 808
key是虚拟对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较。
js方法
aiaoming5989的博客
04-24 210
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 NumberObject.toFixed(num) num必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。 转载于:https://www.cnblogs.com/zhangjunlong/p/8931826.html...
Vue基础2：v-for及过滤与排序
u013089490的博客
11-05 4008
1.v-for遍历数组 【v-for遍历数组语法】 v-for="item in items" tems：要遍历的数组，需要在vue的data中定义好； item：迭代得到的数组元素的别名。 【代码例子】 &lt;div id="app"&gt; &lt;ul&gt; &lt;li v-for="user in users"&gt; ..
filter过滤v-for循环的数组
lc1172981308的博客
10-19 258
filter过滤v-for循环的数组
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-visual-filter:Vue 3的非标准视觉过滤组件
04-17
什么 无调解的Vue视觉过滤组件。...import VueVisualFilter from "vue-visual-filter/dist/vue-visual-filter.esm.js" ; // CSS import "vue-visual-filter/dist/styles.css" ; 对于CDN用户： <!-- CSS --
vue-currency-filter:on基于accounting.js的轻量级vue货币过滤器
05-23
# NPMnpm install vue-currency-filter# Yarnyarn add vue-currency-filter样品用量逐步使用vue-currency-filter ：导入main.js import VueCurrencyFilter from 'vue-currency-filter' 使用插件 Vue . use ( ...
Java进阶学习第二十一天——Filter学习
lutianfei的专栏
06-03 3656
javaWeb过滤器 Fileter介绍 Filter如何实现拦截 开发Fileter步骤 Filter链 Filter的生命周期 FilterConfig接口 注册与映射Filter Filter示例 示例1全站统一字符编码过滤器 示例2禁用所有JSP页面缓存 示例3设置图片过期时间 示例4自动登录案例（MD5加密） 示例5 URL级别的权限控制 示例6 通用get和post乱码过滤器
Android辅助权限之微信自动评论与点赞
weixin_34342207的博客
01-21 1499
当我们把辅助权限玩的比较熟悉 的时候，就可以释放我们的双手做一些有趣的事情了，例如之前网上流传的微信自动抢红包插件，就是使用的这个服务，不过我们今儿讲的是微信自动评论与点赞功能（抢红包的文章网上已经有比较多）。 一、悬浮窗配置 关于悬浮窗的详细配置，请看我另一篇博文，这里不再赘述，「传送门」： Android 辅助权限与悬浮窗 二、自动化逻辑代码实现 说明：我们通过 Monitor 工具，取...
File类-递归-IO流
好好学习
08-02 135
File类 java.io.File类 文件和目录路径名的抽象表示形式 Java把电脑中的文件和文件夹（目录）封装为了一个File类，我们可以使用File类对文件和文件夹进行操作 我们可以使用File类的方法 创建一个文件/文件夹 删除文件/文件夹 获取文件/文件夹 判断文件/文件夹是否存在 对文件夹进行遍历 获取文件的大小 File类是一个与系统无关的类，任何的操作系统都可以使用这个类中的方法 重点：file：文件 directory：文件夹/目录 path：路径 File类的静态成员变量 static
vue循环使用filter
irisMoon06的博客
11-29 824
vue循环使用filter
Vuex使用和v-model语法详细教程
idiot_MAN的博客
09-29 865
/ 初始化vuex对象state: {// 管理数据count: 0,},})如何在组件中获取count？state: {// 管理数据},// d定义mutations}})mutations是一个对象，对象中存放修改state的方法// 方法里的参数 第一个参数是当前store的state属性// 第二个参数payload 运输参数 调用mutations的时候 可以传递参数},},},如何在组件中调用mutations？actions: {
filter vue 循环_Vue2.0 v-for filter列表过滤功能的实现
最新发布
05-25
在 Vue2.0 中，我们可以使用计算属性和过滤器来实现列表的过滤功能。 首先，在模板中使用 v-for 指令循环渲染列表，然后通过计算属性或者过滤器来对列表进行过滤。 以下是一个例子： ```html <template> <div> <input type="text" v-model="keyword" placeholder="输入关键词进行搜索"> <ul> <li v-for="item in filteredList">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { list: ['apple', 'banana', 'orange', 'peach'], keyword: '' } }, computed: { filteredList() { const keyword = this.keyword.trim().toLowerCase() if (!keyword) { return this.list } return this.list.filter(item => item.toLowerCase().indexOf(keyword) !== -1) } } } </script> ``` 在上面的代码中，我们定义了一个列表 `list` 和一个输入框 `keyword`，然后使用 v-for 指令循环渲染列表。 在 computed 计算属性中，我们定义了一个名为 `filteredList` 的计算属性，它根据输入框中的关键词对列表进行过滤。如果输入框中没有输入关键词，则返回原始的列表；否则，使用 `filter` 方法对列表进行过滤，将符合条件的列表项返回。 在模板中，我们使用 `{{ item }}` 渲染每个列表项，但是我们使用的是 `filteredList` 计算属性，因此只会渲染符合过滤条件的列表项。 如果你想使用过滤器来实现列表过滤，可以将上面的 `filteredList` 计算属性改为一个过滤器： ```javascript filters: { filterList(list, keyword) { keyword = keyword.trim().toLowerCase() if (!keyword) { return list } return list.filter(item => item.toLowerCase().indexOf(keyword) !== -1) } } ``` 然后在模板中使用管道符 `|` 调用过滤器： ```html <li v-for="item in list | filterList(keyword)">{{ item }}</li> ``` 这样就可以实现列表的过滤功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值