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 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
学习vue.js计算属性
Dec 03 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
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
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python做反被爬保护的方法
2019/07/01 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Django封装交互接口代码
2020/07/12 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js