之前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. shell编程:条件测试与比较(六)

    条件测试方法综述 test条件测试的简单语法及测试 范例6-1 测试文件(在test命令中使用-f选项:文件存在且为不同文件则表达式成立) [root@adminset ~]# test -f fil ...

  2. SpringMVC 用注解Annotation驱动的IoC功能@Autowired @Component

    转载自:http://blog.csdn.net/lufeng20/article/details/7598564 本文分为三个部分:概述.使用注解进行属性注入.使用注解进行Bean的自动定义. 一, ...

  3. ZooKeeper入门(四)

    入门:使用ZooKeeper的协调分布式应用 这个文档使你对ZooKeeper快速入门,它主要针对想尝试它的开发者.并且包含简单的单机的ZooKeeper服务的安装说明,一些验证是否运行的命令,和一个 ...

  4. Android应用自动更新功能的代码实现(转)

    由于Android项目开源所致,市面上出现了N多安卓软件市场.为了让我们开发的软件有更多的用户使用,我们需要向N多市场发布,软件升级后,我们也必须到安卓市场上进行更新,给我们增加了工作量.因此我们有必 ...

  5. Hive、Pig、HBase的关系与区别

    欢迎关注大数据和人工智能技术文章发布的微信公众号:清研学堂,在这里你可以学到夜白(作者笔名)精心整理的笔记,让我们每天进步一点点,让优秀成为一种习惯! Pig 一种操作hadoop的轻量级脚本语言,最 ...

  6. SVG 基本绘图方法总结

    基本内容:   * SVG并不属于HTML5专有内容    * HTML5提供有关SVG原生的内容   * 在HTML5出现之前,就有SVG内容   * SVG,简单来说就是矢量图   * SVG文件 ...

  7. ssh连接提示 "Connection closed by remote host"

    如果原来是可以用ssh连接的, 突然连接不上通常是连接数过多导致的. 解决方法一. 把SSH连接数改大 修改服务器上的这个文件:/etc/ssh/sshd_config 找到这行: # MaxSess ...

  8. 【BZOJ】1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列

    [题意]给定n头牛,k个特色,给出每头牛拥有哪些特色的二进制对应数字,[i,j]平衡当且仅当第i~j头牛的所有特色数量都相等,求最长区间长度. [算法]平衡树+数学转化 [题解]统计前缀和sum[i] ...

  9. 剖析 golang 的25个关键字

    剖析 golang 的25个关键字 基本在所有语言当中,关键字都是不允许用于自定义的,在Golang中有25个关键字,图示如下: 下面我们逐个解析这25个关键字. var && con ...

  10. Laravel 5.2 四、.env 文件与模型操作

    一..env文件 .env 文件是应用的环境配置文件,在配置应用参数.数据库连接.缓存处理时都会使用这个文件. // 应用相关参数 APP_ENV=local APP_DEBUG=true //应用调 ...