Vue通过input筛选数据


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下

<div id="app">
 <input v-model='search' />
 <ul>
 <li v-for="item in items">
  <label>价格</label><span v-html="item.name"></span>
  <label>¥</label><span v-html="item.price"></span>
 </ul>
</div>
new Vue({
 el: '#app',
 data: {
 search: '',
 products: [{
  name: '苹果',
  price: 25
 }, {
  name: '香蕉',
  price: 15
 }, {
  name: '雪梨',
  price: 65
 }, {
  name: '宝马',
  price: 2500
 }, {
  name: '奔驰',
  price: 10025
 }, {
  name: '柑橘',
  price: 15
 }, {
  name: '奥迪',
  price: 25
 }]
 },
 computed: {
 items: function() {
  var _search = this.search;
  if (_search) {
  return this.products.filter(function(product) {
   return Object.keys(product).some(function(key) {
   return String(product[key]).toLowerCase().indexOf(_search) > -1
   })
  })
  }

  return this.products;
 }
 }
})

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jquery操作select大全
Apr 25 Javascript
chrome调试javascript详解
Oct 21 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 #Javascript
jQuery遮罩层实例讲解
May 11 #jQuery
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 #Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 #Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 #Javascript
微信小程序 navbar实例详解
May 11 #Javascript
微信小程序 图片宽高自适应详解
May 11 #Javascript
You might like
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
python Django批量导入数据
2016/03/25 Python
python中模块查找的原理与方法详解
2017/08/11 Python
python多进程实现进程间通信实例
2017/11/24 Python
python实现简易淘宝购物
2019/11/22 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
土木工程专业自荐信
2013/10/04 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
机器人总动员观后感
2015/06/09 职场文书
转变工作作风心得体会
2016/01/23 职场文书
python实现网络五子棋
2021/04/11 Python
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript