Vue通过input筛选数据
本文实例为大家分享了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中v-on:textInput无法执行事件问题的解决过程
前言 最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍: 先来看这段示例代码 <div id="wrap"> <input type="text" v-on:textInput="fn"> </div> <script type="text/javascript
-
Vue input控件通过value绑定动态属性及修饰符的方法
对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): <!-- 当选中时,`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="check
-
vue.js 1.x与2.0中js实时监听input值的变化
一.vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component 变成了这样: ref="myComponent" .绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例. 因为 v-ref 不再是一个指令
-
vue获取input输入值的问题解决办法
vue获取input输入值的问题解决办法 v-for里有多行input输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法是,用v-bind:value绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始list里的值,而且ref也不能动态绑定,ref只能全部获取,this.$refs.itemPriceRef[],这
-
vue通过watch对input做字数限定的方法
之前写了关于vue通过watch对input做字数限定的方法,最近需要回顾,就顺便发到随笔上了 <div id="app"> <input type="text" v-model="items.text" ref="count"/> <div v-html="number"></div> /div> new Vue({ el: '#app', data:
-
详解.vue文件中监听input输入事件(oninput)
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo
-
vue2.0结合Element实现select动态控制input禁用实例
今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得为什么不直接把input设置成禁用的而要用动态的,选一次select禁用一次input,也就是说,input只有在select是没有点击过的时候是可编辑的,但凡我改变一次select的值,input就要被设置成禁用,其实没有必要,因为第一次设置成禁用后面已经不能再改变input的值了,不过当时小颖也
-
Vue中封装input组件的实例详解
Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>
-
Vue通过input筛选数据
本文实例为大家分享了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&
-
vue如何通过日期筛选数据
目录 如何通过日期筛选数据 vue简单数据筛选 如何通过日期筛选数据 此片博客介绍的方法是通过请求后台数据给的状态,然后把自己选择的时间传过去实现筛选的,根据业务逻辑来参考吧! 下篇我们会说下通过vue过滤器来实现的方法! 业务逻辑:首先前端需要获取其用户选择的日期数据,然后通过接口把日期数据传给后端,后端接收数据会返回给前端新的数据,页面在进行渲染.到此功能会是实现了 html部分 <div class="ag_listmain clearfix">
-
解决vue项目input输入框双向绑定数据不实时生效问题
我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解
-
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
html: <template> <el-autocomplete popper-class="my-autocomplete" custom-item="my-remote" v-model="state" :fetch-suggestions="querySearch" placeholder="默认空" icon="close" :on-icon-click=&q
-
vue watch自动检测数据变化实时渲染的方法
本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下: 首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 第一个hand
-
vue checkbox 全选 数据的绑定及获取和计算方法
html <input type='checkbox' v-model='checkboxModel' :value='z.coach_id+"-"+z.amount' :i="dianji" @click="lll"> 第一个CheckBox <span><input type='checkbox' v-model='checked' v-on:click='checkedAll'><span clas
-
vue判断input输入内容全是空格的方法
比如input中的数据和data中的msg双向绑定. 那么我们可以 判断先把msg以空格拆分成数组,然后拼接起来,判断字符串的长度,如果长度为0,证明输入的就全是空格了,如下: msg.split(" ").join("").length = 0 以上这篇vue判断input输入内容全是空格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue获取input输入值的问题解决办法 详解.vue文件中监听in
-
pandas按若干个列的组合条件筛选数据的方法
还是用图说话 A文件: 比如,我想筛选出"设计井别"."投产井别"."目前井别"三列数据都为11的数据,结果如下: 当然,这里的筛选条件可以根据用户需要自由调整,代码如下: # -*- coding: utf-8 -*- """ Created on Wed Nov 29 10:46:31 2017 @author: wq """ import pandas as pd #input.c
-
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
本文实例讲述了vue v-for循环重复数据无法添加问题解决方法.分享给大家供大家参考,具体如下: 问题: 错误提示如下: 解决问题的代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue v-for循环重复数据无法添加问题</title> <style>
随机推荐
- 一个tab标签切换效果代码
- 教你一步步实现Android微信自动抢红包
- 查看网关的MAC地址的批处理文件
- iOS 10 推送高阶篇(必看)
- js与jQuery 获取父窗、子窗的iframe
- 鼠标移到图片上变大显示而不是放大镜效果
- ASP.NET中防止页面刷新造成表单重复提交执行两次操作
- MySQL存储数据乱码的问题解析
- jQuery模拟物体自由落体运动(附演示与demo源码下载)
- nodejs爬虫抓取数据乱码问题总结
- Java对象初始化顺序的使用
- Kotlin基础教程之伴生对象,getter,setter,内部,局部,匿名类,可变参数
- 路由器安全设置九部曲
- 利用原生js实现html5小游戏之打砖块(附源码)
- PyTorch搭建一维线性回归模型(二)
- opencv python 图像去噪的实现方法
- Unity3D控件Easytouch控制主角移动
- Android 实现圆圈扩散水波动画效果两种方法
- vue-router懒加载速度缓慢问题及解决方法
- python提取xml里面的链接源码详解