之前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. noip模拟赛 helloworld

    分析:对于第一个点,答案为26^n - 25^n,这个很好想.另外30%的点因为n <= 5,所以可以直接暴力搜索. 数学方法不是很好处理,考虑dp,设f[i][j]为前i位匹配到危险串第j位的 ...

  2. 游戏编程入门之Bomb Catcher游戏

    首先是代码: MyDirectX.h: #pragma once //header file #define WIN32_EXTRA_LEAN #define DIRECTINPUT_VERSION ...

  3. [LeetCode] 7. Reverse Integer ☆

    Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321   Have y ...

  4. Linux 使用代理使网速变快

    $ export http_proxy="http://USER:PASSWORD@PROXY_SERVER:PORT" $ export https_proxy="ht ...

  5. Windows下端口占用查看

    假如我们需要确定谁占用了我们的80端口 1.Windows平台在windows命令行窗口下执行:C:\>netstat -aon|findstr "80" TCP     1 ...

  6. UIPikerView的属性---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址  //转载请注明出处--本文永久链接:http://www.cnblogs.com/C ...

  7. 理解js中私有变量

    私有变量在js中是个什么概念.当下我的认识是var所定义的变量,实际可以理解为属性和方法,或者单单是临时存储器,不归属任何对象. 一个声明函数: function a(){  var v = &quo ...

  8. Android应用程序App应用上线流程

    对于很多初级开发者,可能对app应用上线不太了解,本文跟大家介绍一下怎么上线app应用.上线App并不是一件很困难的事情,App的应用功能也不需要很强大,甚至不用联网,只有简单的一两个页面的App应用 ...

  9. SpringCloud Fegin超时重试源码

    springCloud中最重要的就是微服务之间的调用,因为网络延迟或者调用超时会直接导致程序异常,因此超时的配置及处理就至关重要. 在开发过程中被调用的微服务打断点发现会又多次重试的情况,测试环境有的 ...

  10. Linux 入门记录:二、Linux 文件系统基本结构

    一.树状目录结构 Linux 文件系统是一个倒置的单根树状结构.文件系统的根为"/":文件名严格区分大小写:路径使用"/"分割(Windows 中使用" ...