之前vue1.0的过滤器真的很好使,但是作者为了不让搬运工变得太菜。硬是砍去了过滤器,为此,我还哭了好一阵,终于,一点一点的弄明白了过滤器是怎么回事后,也学明白了vue里的属性监听器computed以及框架里提供的filter的使用,觉得,作者这样做是对的。

先来一个模糊搜索

 <ul>
<li v-for="user in newUsers" >
{{ user.code }}
</li>
</ul> new Vue({
el: '.app',
data: {
name: '',
users: [
{ code: '11111' },
{ code: '8797979' },
{ code: '4565465' },
{ code: '555555' },
{ code: '1006' },
{ code: '2555' },
] },
computed: {
newUsers: function () {
var that = this;
return that.users.filter(function (user) {
return user.code.toLowerCase().indexOf(that.code.toLowerCase()) !== -1;//当然如果是纯属字就可以不用转换小写了,处于习惯还是加上了
})
}
} })

  接下来还有一个select的,其实官网有例子,但是我还是毫无保留的拿出来了。

 <select v-model="selected" >
<option v-for="option in options" v-bind:value="option">
{{ option }}
</option>
</select>
<span>Selected: {{ selected }}</span> new Vue({
el: '.app',
data: {
selected: '30',
options: [
30,50,70,100
]
},
})

  

vue模糊搜索&select取值的更多相关文章

  1. jquery select取值,赋值操作

    select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...

  2. jQuery radio取值,checkbox取值,select取值

    语法解释: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkTex ...

  3. easyui 》 radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中

    获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...

  4. jquery操作select(取值,设置选中)

    最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...

  5. jquery radio取值,checkbox取值,select取值及选中

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('in ...

  6. jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中

    jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...

  7. Jquery常用操作:checkbox、select取值,radio、checkbox、select选中及其相关

    常用Jquery操作:checkbox取值.select取值.radio选中.checkbox选中.select选中及其相关: 1.影藏页面元素 使用jquery真的很方便,比如要控制div的显示与隐 ...

  8. jquery操作select(取值,设置选中) 基础

    每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...

  9. select取值问题

    全栈攻城狮们给挖了各种坑..其中一个典型是select控件取值.直接上代码: <!DOCTYPE html> <html lang="en"> <he ...

随机推荐

  1. 三大linux系统对比

    概述: centos作为服务器部署是第一选择.CentOS去除很多与服务器功能无关的应用,系统简单但非常稳定,命令行操作可以方便管理系统和应用,丰富的帮助文档和社区的支持. ubuntu最佳的应用领域 ...

  2. 【题解】回文串 APIO 2014 BZOJ 3676 COGS 1985 Manacher+后缀数组+二分

    这题可以用回文自动机来做,但是我并没有学,于是用Manacher+SA的做法O(nlogn)水过 首先,看到回文串就能想到用Manacher 同样还是要利用Manacher能不重复不遗漏地枚举每个回文 ...

  3. HDU1522 稳定婚姻匹配 模板

    Marriage is Stable Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  4. 从samsung提供内核进行移植

    1.尝试编译分析结果 配置编译下载尝试 (1)检查Makefile中ARCH和CROSS_COMPILE(2)make xx_defconfig(3)make menuconfig(4)make -j ...

  5. android极光推送初步了解

    推送可以及时,主动的与用户发起交互 (1)继承jar包,照示例AndroidManifest.xml添加. (2)自定义MyApp继承自Application,在onCreate方法中调用JPushI ...

  6. HDU 4609 FFT模板

    http://acm.hdu.edu.cn/showproblem.php?pid=4609 题意:给你n个数,问任意取三边能够,构成三角形的概率为多少. 思路:使用FFT对所有长度的个数进行卷积(\ ...

  7. Ubuntu 修改IP地址

    Ubuntu 修改IP地址1.ubuntu系统修改IP地址:sudo vim /etc/network/interfacesauto eth0iface eth0 inet staticaddress ...

  8. 2017-2018-1 20179205《Linux内核原理与设计》第九周作业

    <Linux内核原理与设计>第九周作业 视频学习及代码分析 一.进程调度时机与进程的切换 不同类型的进程有不同的调度需求,第一种分类:I/O-bound 会频繁的进程I/O,通常会花费很多 ...

  9. js 验证ip列表

    如题. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  10. linux驱动基础系列--Linux下Spi接口Wifi驱动分析

    前言 本文纯粹的纸上谈兵,我并未在实际开发过程中遇到需要编写或调试这类驱动的时候,本文仅仅是根据源码分析后的记录!基于内核版本:2.6.35.6 .主要是想对spi接口的wifi驱动框架有一个整体的把 ...