Vue2.0实现1.0的搜索过滤器功能
Vue2.0删除了很多1.0的比较实用的过滤器，如filterBy，orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能，自己又加入了大小写通用检索功能，比较简单，学一下。
<body>
<div class="app">
<input type="text" v-model="name">
<ul>
<li v-for="user in newUsers" >
{{ user.name }}
</li>
</ul>
</div>
<script>
new Vue({
el: '.app',
data: {
name: '',
users: [
{ name: 'Bruce' },
{ name: 'Chuck' },
{ name: 'Jackie' },
{ name: '赵' }
]
},
computed: {
newUsers: function () {
var that = this;
return that.users.filter(function (user) {
return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;
})
} }
})
</script>
</body>
Vue2.0实现1.0的搜索过滤器功能的更多相关文章
- vue2.0 与 vue3.0 配置的区别
提示:要了解vue2.0与vue3.0区别,首先你要熟悉vue2.0 从最明显最简单的开始 项目目录结构 可以明显的看出来,vue2.0与3.0在目录结构方面,有明显的不同(vue3.0我是安装了cs ...
- Webx.0-Web2.0：Web2.0
ylbtech-Webx.0-Web2.0:Web2.0 Web2.0 是相对于Web1.0 的新的时代.指的是一个利用Web的平台,由用户主导而生成的内容互联网产品模式,为了区别传统由网站雇员主导生 ...
- Nuget自己打包引用的时候出现错误：Package is not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0). Package 1.0.1 supports: net (.NETFramework,Version=v0.0)
Nuget自己打包引用的时候出现错误:Package is not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0). Package ...
- AFNetworking2.0和AFNetworking3.0 的HTTPS的配置
前言: 由于苹果声明在前说是2017.01.01之后提交审核的APP,必须使用HTTPS请求,要不就直接驳回审核,吓得我们年前赶紧提交了一个版本,想着年后在弄这个https,结果又有消息说是苹果推迟了 ...
- 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...
- Solr 5.5.0 + tomcat 7.0.69 + zookeeper-3.4.6 Cloud部署
Solr介绍:Solr是一个独立的企业级搜索应用服务器,Solr基于Lucene的全文搜索服务器,同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了 ...
- vue.js学习：1.0到2.0的变化（区别）
一.生命周期 1.1.0的生命周期: 周期 解释 init 组件刚刚被创建,但Data.method等属性还没被计算出来 created 组件创建已经完成,但DOM还没被生成出来 beforeComp ...
- vue1.0到2.0
vue1.0到2.0 vue2.0 新手教程(一) 想想自己写vue的项目也写了一年了,从vue1.0到2.0,走过不少路,填过不少坑, 下面记录一下新手从0到1的过程,本文“应该”会持续更新 首 ...
- 保姆级教程——Ubuntu16.04 Server下深度学习环境搭建：安装CUDA8.0，cuDNN6.0，Bazel0.5.4，源码编译安装TensorFlow1.4.0(GPU版)
写在前面 本文叙述了在Ubuntu16.04 Server下安装CUDA8.0,cuDNN6.0以及源码编译安装TensorFlow1.4.0(GPU版)的亲身经历,包括遇到的问题及解决办法,也有一些 ...
随机推荐
- Linux 操作mysql数据库 创建库 导入、删除表
确保线上的运行数据库是不可避免的本人小白,因公司上线没有办法自己去整服务器,深刻体会到服务器大神的霸气,所以为了增加记忆,服务广大员友记录一下 linux mysql 忘记root的密码无法登陆进my ...
- 丢掉慢吞吞的AVD吧，android模拟神器:Genymotion
安装图文介绍: http://padhz.com/how-to-run-android-simulator-on-pc.html; 刚好手头上有visual box,亲自试用了一下.新建了一个Gala ...
- openswan-ipsec.conf配置说明
Name ipsec.conf - IPsec configuration and connections Description The optional ipsec.conf file speci ...
- iOS Start developing ios apps (OC) pdf
这是苹果官方最后一次更新的基于OC的iOS开发基础教程, 如果英文的看不懂,还有中文的版本哦. 点击下面的链接 好东西,分享给大家! 如果确实有帮到你,麻烦star一下我的github吧!
- 试用avalon2.0
一直从事后端开发,对于前端的html+css+js,不熟不熟的.前面写了一个比较复杂的操作界面,我只能说,误工费时.花了一周研究avalonjs2,大神的确就是大神,解决了我很多的问题, 请参考htt ...
- ssh简化后之事务管理
为了能让大家更好的了解,所以今天跟大家分享整个项目.ps:ssh环境的搭建我就不一一讲解了,请大家参考 http://www.cnblogs.com/zczc1996/p/5842367.html. ...
- OpenCV学习笔记（一）——OpenCV3.1.0+VS2015开发环境配置
摘要: 由于最近AR(增强现实)这个概念非常火爆,各种基于AR的应用及游戏逐渐面向大众,而在AR中最重要的两个技术就是跟踪识别和增强渲染,其中跟踪识别是通过OpenCV这个开源的计算机视觉库来实现的, ...
- 李洪强iOS经典面试题156 - Runtime详解（面试必备）
李洪强iOS经典面试题156 - Runtime详解(面试必备) 一.runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C ...
- python安装完毕后，提示找不到ssl模块的解决步骤
转载自 醇酒醉影 python安装完毕后,提示找不到ssl模块: [root@localhost ~]# python2.7.5 Python 2.7.5 (default, Jun 3 2013, ...
- webform 组合查询
界面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx ...