Vue通过input筛选数据

2024-09-27 16:38:15

本文实例为大家分享了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文件中监听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控件通过value绑定动态属性及修饰符的方法

对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):  <input type="radio" v-model="picked" value="a">  <input type="check
vue.js中v-on:textInput无法执行事件问题的解决过程

前言最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍: 先来看这段示例代码 <div id="wrap"> <input type="text" v-on:textInput="fn"> </div> <script type="text/javascript
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通过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组件的实例详解

Vue中封装input组件最近有点忙不过来脱了很久,没有更新抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板码友们可以更具自己的实际项目添加需要的参数我的项目中的UI图是这样的代码如下子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>
vue获取input输入值的问题解决办法

vue获取input输入值的问题解决办法 v-for里有多行input输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法是,用v-bind:value绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始list里的值,而且ref也不能动态绑定,ref只能全部获取,this.$refs.itemPriceRef[],这
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>

Vue通过input筛选数据

相关推荐

随机推荐