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 相关文章推荐
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
vue项目实战总结篇
Feb 11 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP中的正规表达式(一)
2006/10/09 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
python实现逻辑回归的方法示例
2017/05/02 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
蛋糕店的商业计划书范文
2014/01/27 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
品质主管岗位职责
2014/03/16 职场文书
优秀护士先进事迹
2014/05/08 职场文书
安全横幅标语
2014/06/09 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
校园安全主题班会
2015/08/12 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
MySQL Router的安装部署
2021/04/24 MySQL