vue2 filter过滤器的使用
本章主要讲vue2的过滤器的使用
1.先介绍下vue1与vue2的filter区别，也就是vue2更新的地方
a: 2.0将1.0所有自带的过滤器都删除了，也就是说，在2.0中，要使用过滤器，则需要我们自己编写。
b: 2.0过滤器的传参方式不是以前的方式，是以函数传参的方式，下面示例（后面有具体示例）：
之前调用: {{msg | mimi '12' '5'}}
现在调用: {{msg | mimi('12','5')}} c: 移除双向过滤器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>filter</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--添加两个过滤器,注意不要冲突,注意先后顺序-->
<li v-for="item in list">{{item.id | filterAdd1 | filterAdd2}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data(){
return {
list:[
{"id":0,"title":"11111","cont":"111111"},
{"id":1,"title":"22222","cont":"111111"},
{"id":2,"title":"33333","cont":"111111"},
{"id":3,"title":"44444","cont":"111111"},
]
}
},
filters:{
filterAdd1(item) {
return item+10;
},
filterAdd2(item) {
return '$'+item;
}
},
methods:{
},
mounted(){
}
})
</script>
</html>
3.注册在全局的fliter，filter传值，filter动态传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>filter</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--添加两个过滤器,注意不要冲突,注意先后顺序-->
<!-- 过滤传值，带引号的是字符串，不带是number,传的值可以动态绑定-->
<li v-for="item in list">{{item.id | filterAdd1(Number(input),20) | filterAdd2}}</li>
</ul>
<input type="text" placeholder="place" v-model="input">
</div>
</body>
<script>
Vue.filter('filterAdd1', function (value,one,two) {
return value+one+two;//默认第一个参数就是默认要过滤的那个值
})
Vue.filter('filterAdd2', function (value) {
return '$'+value;
})
var vm = new Vue({
el:'#app',
data(){
return {
input:5,
list:[
{"id":0,"title":"11111","cont":"111111"},
{"id":1,"title":"22222","cont":"111111"},
{"id":2,"title":"33333","cont":"111111"},
{"id":3,"title":"44444","cont":"111111"},
]
}
},
methods:{
},
mounted(){
}
})
</script>
</html>
结果：
4. 计算属性筛选，methods方法筛选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src="vue.js"></script> -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<div @click="addMore">加载更多</div>
<ul><li v-for="item in filterlist">{{item}}</li></ul>
<hr>
<ul><li v-for="item in filterlistFun()">{{item}}</li></ul>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data(){
return {
size:5,
list:[
{"id":0,"title":"11111","cont":"111111"},
{"id":1,"title":"22222","cont":"111111"},
{"id":2,"title":"33333","cont":"111111"},
{"id":3,"title":"44444","cont":"111111"},
{"id":4,"title":"55555","cont":"55555"},
{"id":5,"title":"66666","cont":"66666"},
{"id":6,"title":"77777","cont":"77777"},
{"id":7,"title":"77777","cont":"88888"},
{"id":8,"title":"888888","cont":"999999"},
{"id":9,"title":"000000","cont":"99999"},
{"id":10,"title":"a88888","cont":"99999"},
{"id":11,"title":"a22222","cont":"111111"},
{"id":12,"title":"a33333","cont":"111111"},
{"id":13,"title":"a44444","cont":"111111"},
{"id":14,"title":"a55555","cont":"55555"},
{"id":15,"title":"a66666","cont":"66666"},
{"id":16,"title":"a77777","cont":"77777"},
{"id":17,"title":"a77777","cont":"88888"},
{"id":18,"title":"a888888","cont":"999999"},
{"id":19,"title":"a000000","cont":"99999"},
{"id":20,"title":"a88888","cont":"99999"}
]
}
},
computed: {
filterlist () {
let num=this.size;
return this.list.filter(function (number) {
return number.id < num
})
}
},
methods:{
filterlistFun(val){
let num=this.size;
return this.list.filter(function (number) {
return number.id < num
})
},
addMore(){
this.size+=5;
},
},
mounted(){
}
})
</script>
</html>
vue2 filter过滤器的使用的更多相关文章
- vue2.0过滤器
最近一阶段,项目上比较清闲,有了更多的时间可以研究一下vue了. 这里记录一下关于vue2.0过滤器的学习. vue2.0删除了所有的框架自带的过滤器,也就是说,如果你在vue2.0当中想用过滤器,那 ...
- filter 过滤器（监听）
Filter 过滤器 1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, ...
- Java防止SQL注入2（通过filter过滤器功能进行拦截）
首先说明一点,这个过滤器拦截其实是不靠谱的,比如说我的一篇文章是介绍sql注入的,或者评论的内容是有关sql的,那会过滤掉:且如果每个页面都经过这个过滤器,那么效率也是非常低的. 如果是要SQL注入拦 ...
- Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- javaweb学习总结(四十二)——Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- Filter过滤器简单应用( 接口访问控制 )
一.描述 在提供安卓.IOS客户端接口时,可以在登陆接口分配Session给客户端,用于判断其他接口是否是合法访问,以避免将所有的接口都暴露在web中可以由路径直接访问.但是最近的一个项目中的移动接口 ...
- 如何配置Filter过滤器处理JSP中文乱码
参考Tomcat服务器目录webapps的examples示例 简单配置步骤:1.在项目web.xml文件添加过滤器标记<filter>和<filter-mapping>:2. ...
- Filter(过滤器)常见应用
孤傲苍狼 只为成功找方法,不为失败找借口! javaweb学习总结(四十六)——Filter(过滤器)常见应用 一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html F ...
- Filter过滤器（1）
Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ht ...
随机推荐
- hdoj--2098--分拆素数和（枚举）
分拆素数和 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- Oracle SQL性能优化系列
1. 选用适合的ORACLE优化器 ORACLE的优化器共有3种: a. RULE (基于规则) b. COST (基于成本) c. CHOOSE (选择性) 设置缺省的优化器,可以通过对init.o ...
- EOJ 3018 查找单词
有一个单词 W,输出它在字符串 S 中从左到右第一次出现的位置 IDX(设 S 中的第 1 个字符的位置为 1).W 只由英文字母组成,S 除英文字母和汉字之外在任何位置(包括头和尾)另有一个或多个连 ...
- Xcode的一些控制台命令
命令 解释 break NUM 在指定的行上设置断点 bt 显示所有的调用栈帧,该命令可用来显示函数的调用顺序 clear 删除设置在特定源文件.特定行上的断点,其用法为:clear FILENAME ...
- MVC、控件、一般处理程序中的session and cookie
Mvc中: session: if (!string .IsNullOrEmpty(find)) //设置 Session["oip"] = "无锡"; Vie ...
- .NET XML POST 请求
//请求体,XML参数 string xmlstring = @"<root></root>“; //请求URL string postUrl ="http ...
- Failed reading log event, reconnecting to retry
数据库版本:5.6.16 系统:CentOS 6.5 搭建数据库从库报错:160411 14:30:39 [Note] Slave I/O thread: Failed reading log eve ...
- thrift-go（golang）Server端笔记
1.从thrift源码中拷贝go语言包(thrift\lib\go\thrift),放到go/src/下 2.新建go项目,实现server端服务接口 package main impor ...
- EXCEL 表格保护破解
'Alt + F11 进入vb编辑器,插入代码,然后在宏查看器里执行,大概等1-2分钟,完成. Public Sub AllInternalPasswords() ' Breaks workshe ...
- 关于优化for循环的注意的事项
for循环注意事项: 1.for循环内部尽量少做数据库查询之类的IO代价大的操作 2.尽量控制for循环的次数,不多做无用功 3.能一次加载在内存中的,就不要通过循环来多次查询数据库,除非数据量过大. ...