Vue2.0 v-for filter列表过滤功能的实现


Posted in Javascript onSeptember 07, 2018

使用计算属性app.js

var app5 = new Vue({
 el: '#app5',
 data: {
  shoppingList: [
   "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
  ],
  key: ""
 },
 computed: {
  filterShoppingList: function () {
   // `this` points to the vm instance
   var key = this.key;
   var shoppingList = this.shoppingList;
   return shoppingList.filter(function (item) {
    return item.toLowerCase().indexOf(key.toLowerCase()) != -1
   });;
  }
 }
})

app.html

<div id="app5">
  <h2>Vue-for</h2>
  <ul>
   <li v-for="item in shoppingList">
    {{ item }}
   </li>
  </ul>
  <h2>Vue-for filter实现</h2>
  <ul>
   Filter Key<input type="text" v-model="key"> 
   <li v-for="item in filterShoppingList">
    {{ item }}
   </li>
  </ul>  
 </div>

最终效果实现了根据关键字来过滤列表的功能。

以上这篇Vue2.0 v-for filter列表过滤功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
koa socket即时通讯的示例代码
Sep 07 #Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 #Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 #Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 #Javascript
前端防止用户重复提交js实现代码示例
Sep 07 #Javascript
vue实现打印功能的两种方法
Sep 07 #Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 #Javascript
You might like
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
php中namespace use用法实例分析
2016/01/22 PHP
Smarty变量用法详解
2016/05/11 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
方正Java笔试题
2014/07/03 面试题
保险专业大专生求职信
2013/10/26 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
汽车促销活动方案
2014/03/31 职场文书
四年级评语大全
2014/04/21 职场文书
大学生社会实践方案
2014/05/11 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏