vue模糊搜索&select取值
之前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取值的更多相关文章
- jquery select取值,赋值操作
select">jquery select取值,赋值操作 一.获取Select 获取select 选中的 text : $("#ddlRegType").find( ...
- jQuery radio取值,checkbox取值,select取值
语法解释: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkTex ...
- easyui 》 radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中
获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...
- jquery操作select(取值,设置选中)
最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...
- jquery radio取值,checkbox取值,select取值及选中
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('in ...
- jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中
jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Se ...
- Jquery常用操作:checkbox、select取值,radio、checkbox、select选中及其相关
常用Jquery操作:checkbox取值.select取值.radio选中.checkbox选中.select选中及其相关: 1.影藏页面元素 使用jquery真的很方便,比如要控制div的显示与隐 ...
- jquery操作select(取值,设置选中) 基础
每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select&g ...
- select取值问题
全栈攻城狮们给挖了各种坑..其中一个典型是select控件取值.直接上代码: <!DOCTYPE html> <html lang="en"> <he ...
随机推荐
- iOS常用RGB颜色的色值
常用RGB颜色表 色值 R G B 值 R G B 值 R G B 值 黑色 0 0 0 #000000 黄色 255 255 0 #FFFF00 浅灰蓝色 176 224 230 #B0E0E6 ...
- [codeforces/edu2]总结(F)
链接:http://codeforces.com/contest/600 A题: 字符串处理. B题: sort+upper_bound C题: 统计一下每种字符的个数,然后贪心. (1) 如果没有奇 ...
- [LeetCode] Binary Tree Level Order Traversal 与 Binary Tree Zigzag Level Order Traversal,两种按层次遍历树的方式,分别两个队列,两个栈实现
Binary Tree Level Order Traversal Given a binary tree, return the level order traversal of its nodes ...
- [Luogu 2596] ZJOI2006 书架
[Luogu 2596] ZJOI2006 书架 第一次指针写 FHQ_Treap(省选噩梦数据结构)AC 啦! 省选试机写它,紧张过度失败了. 省选 Day 1 考场写它,写挂了. 省选 Day 1 ...
- 超详细的Java面试题总结(一)之Java基础知识篇
面向对象和面向过程的区别 面向过程: 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Linux/Unix等一般采用面向过程开发,性能是最重要的因 ...
- 多种方法过Codeforces Round #270的A题(奇偶法、打表法和Miller_Rabin(这个方法才是重点))
题目链接:http://codeforces.com/contest/472/problem/A 题目: 题意:哥德巴赫猜想是:一个大于2的素数一定可以表示为两个素数的和.此题则是将其修改为:一个大于 ...
- 2、MySQL常见数据库引擎及比较?
MySQL存储引擎简介 MySQL支持数个存储引擎作为对不同表的类型的处理器.MySQL存储引擎包括处理事务安全表的引擎和处理非事务安全表的引擎: MyISAM管理非事务表.它提供高速存储和检索,以及 ...
- js中的document.ready
1.概念 表示在dom结构绘制完成后执行,可能DOM元素关联的部分并未加载完 2.写法 $(document).on("ready",function(){ }) $(docume ...
- js中的indexOf
1.概述 indexOf大小写敏感,其中的O要大写 2.对于字符串而言 indexOf返回字符串第一次出现的位置,若没有出现返回-1 var str = "hello world" ...
- 64_c1
CBFlib-0.9.5.15-3.fc26.i686.rpm 05-Feb-2017 21:55 427710 CBFlib-0.9.5.15-3.fc26.x86_64.rpm 05-Feb-20 ...