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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
Angular表单验证实例详解
Oct 20 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
微信小程序 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面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
给Function做的OOP扩展
2009/05/07 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
JS实现吸顶特效
2020/01/08 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python 字符串与数字输出方法
2018/07/16 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python同步windows和linux文件
2019/08/29 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
实习生自我评价
2014/01/18 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
高中生班主任评语
2014/04/25 职场文书
承诺函格式模板
2015/01/21 职场文书
医院保洁员管理制度
2015/08/05 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技