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 ...
随机推荐
- Educational Codeforces Round 48 (Rated for Div. 2) CD题解
Educational Codeforces Round 48 (Rated for Div. 2) C. Vasya And The Mushrooms 题目链接:https://codeforce ...
- POJ 3421分解质因数
X-factor Chains Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7375 Accepted: 2340 D ...
- kubernetes创建资源对象yaml文件例子--pod详解
apiVersion: v1 #指定api版本,此值必须在kubectl apiversion中 kind: Pod #指定创建资源的角色/类型 metadata: #资源的元数据/属性 name: ...
- uboot各文件及文件夹分析
1.配置编译 uboot的配置编译需要在linux原生文件夹下,因为在编译过程中会生成符号链接.在windows中不支持.配置方法是:首先cd进入uboot源码的根目录,然后在根目录下执行:make ...
- emoji表情处理研究
http://blog.csdn.net/qdkfriend/article/details/7576524
- C11工具类:时间处理
C++11提供时间管理类,包括三种类型:时间间隔duration,时钟clocks,时间点time point. 1.记录时常的duration 1.1 原型 duration表示一段时间间隔,用来记 ...
- 编译redis时 提示make cc Command not found
在linux系统上对redis源码进行编译时提示提示“make cc Command not found,make: *** [adlist.o] Error 127”. 这是由于系统没有安装gcc环 ...
- Xamarin入门浅析
1. 安装 1) 使用标准安装流程(JDK1.6 -> Android SDK -> NDK -> Xamarin Studio -> Xamarin Visual Studi ...
- python+selenium+js 处理滚动条
selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候需要借 ...
- HDU 1002 A + B Problem II (大数加法)
题目链接 Problem Description I have a very simple problem for you. Given two integers A and B, your job ...