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 ...
随机推荐
- HttpClient简单操作
HttpClient 这个框架主要用来请求第三方服务器,然后获取到网页,得到我们需要的数据: HttpClient设置请求头消息User-Agent模拟浏览器 比如我们请求 www.tuicool.c ...
- datatable dataRow
DataRow[] Drs = DtStockProduct.Select(Condition11); DtResult = DtStockProduct.Clone(); datatble tabl ...
- Oracle学习系类篇（一）
1.表空间介绍 oarcle数据库真正存放数据的是数据文件(data files),Oarcle表空间(tablespaces)实际上是一个逻辑的概念,他在物理上是并不存在的,那么把一组data fi ...
- sql获得某个时间段的数据
CONVERT(Date, 时间字符串变量 ) between CONVERT(Date,'2015/2/10') and CONVERT(Date,'2015-3-10')
- BZOJ2440: [中山市选2011]完全平方数(莫比乌斯+容斥原理)
2440: [中山市选2011]完全平方数 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 4920 Solved: 2389[Submit][Sta ...
- input[type='file']获取上传文件路径案例
最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...
- Java NIO（七）管道
Java NIO 管道是两个线程之间的单向数据连接.Pipe有一个source通道和sink通道(内部类).数据会被写到sink通道,从source通道读取. 给一张Pipe通道的原理图: 创建管道: ...
- Activity-任务栈和启动模式
为什么需要了解关于Activity的任务栈,其实最直接的体现就是提高用户交互友好性. 举个例子,当我们去浏览一个新闻客户端的时候,我们进入了新闻详情页,在这个页面有相隔两条的新闻标题,当我们去点击这个 ...
- zabbix监控自身为监控机（server）
Zabbix 监控主机 添加自身为被监控机 这里我的环境已经部署完毕(没有经验的小伙伴可以看我上一篇文章) 等待一会刷新如下页面 字体出现以下亮度就成功了
- 嵌入式平台选择：树莓派 or BeagleBone Black（BBB）
原文链接: Michael Leonard 翻译: 极客范- 小道空空 译文链接: http://www.geekfan.net/5246/ 嵌入式平台选择:树莓派 or BeagleBone Bla ...