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 ...
随机推荐
- oracle 11gR2 如何修改scan vip 地址 /etc/hosts方式
这次帮客户搭建了一套oracle 11gR2 rac for aix环境,scan vip因为网络调整需要,需要更改以前设置好的scan vip,是采用/etc/hosts的方式,比如将scan vi ...
- Makefile经典教程（转）
转自:http://blog.csdn.net/ruglcc/article/details/7814546/ makefile很重要 什么是makefile?或许很多Winodws的程序员都不知道这 ...
- week5_notebooke1
大纲: 01 装饰器进阶 02 函数的有效信息 03 可迭代对象.迭代器 04 生成器 列表生成式 生成器表达式 05 内置函数 06 二分查找 01 装饰器进阶 #多个装饰器装饰同一个函数: ## ...
- 使用http-server开启一个本地服务器
前言 在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地 ...
- 利用PBFunc在Powerbuilder中进行FTP操作
PBFunc.dll包含了FTP的操作,使用FTP时主要需要以下步骤: 1.调用of_Login函数登录Ftp服务器 2.调用FTP的各种方法 3.Ftp操作完毕后调用of_LoginOut方法进行注 ...
- 聊聊 TCP 中的 KeepAlive 机制
KeepAlive并不是TCP协议规范的一部分,但在几乎所有的TCP/IP协议栈(不管是Linux还是Windows)中,都实现了KeepAlive功能 RFC1122#TCP Keep-Alives ...
- java中静态,抽象,接口，继承总结
(一).静态: 1.静态方法里只能访问静态变量,静态变量是类所特有的,所有类实例都作用同一个变量 静态随着类的加载而加载 (二). 抽象:抽象相当于接口,没有方法体,只定义方法,让子类实现,抽象类中可 ...
- springboot中文文档
http://blog.geekidentity.com/spring/spring_boot_translation/ https://blog.csdn.net/zfrong/article/de ...
- JAVA导出csv出现0.00E+00
导出csv出现 0.00E+00的问题,打印其值为0E-8:这是因为数据表中无对应数据(decimal),查询结果则为 0e-8. 出现的字段是多个字段相加产生的和,所以这里调用了一个相加的方法.在相 ...
- 如何让select中的滚动条自动定位到框中选中项的位置
document.getElementById("hidScrollTop").value = document.getElementById("slcYZYongFa& ...