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--2122--Ice_cream’s world III(克鲁斯卡尔)
Ice_cream's world III Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- [IOI 1998] Polygon
[题目链接] http://poj.org/problem?id=1179 [算法] 区间DP [代码] #include <algorithm> #include <bitset& ...
- 在eclipse环境下使用maven install 命令碰到native2ascii-utf8问题解决方案
报错语句:Failed to execute goal org.codehaus.mojo:native2ascii-maven-plugin:1.0-beta-1:native2ascii (nat ...
- Java基础——增强for循环
java1.5版本引入了一个增强for循环,基本原理和for循环类似. 语法声明:for(表达式:条件表达式) 举例:for (String str : set) 解释:set代表set集合,str代 ...
- vue2.x directive - 限制input只能输入正整数
onlyNum.js import Vue from 'vue' //只对input生效 export default function (el) { var input = el; input.on ...
- NGUI 使用Grid自动排列UI
1,NGUI->Create Grid 2,把需要排列的UI放到Grid下边,对Grid进行参数设置
- Unity 三维软件单位导入资源单位比例
三维软件 内部米制尺寸/m 默认设置导入unity中的尺寸/m 与unity单位比例 Maya 1 100 1:100 3DS MAX 1 0.01 100:1 Cinema 4D 1 100 1:1 ...
- CorelDRAW教程：怎样绘制制作箭头流程图？
箭头流程图主要由矢量图和连接符组成,通过图形之间的顺序阐述的一个过程,应用也是非常广泛,有些软件中会自带流程图,对于CDR这款矢量绘图软件来说,手动制作流程图是简单且高效的.首先CorelDRAW中就 ...
- 第十二章 Python网络编程
socket编程 socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.它把复杂的TCP/IP协议族隐藏在Socket接口后面,对用户来说,一组简单的接口就是全部,让Socket ...
- XML教程！
什么是XML? XML是指可扩展标记语言(eXtensible Markup Language),它是一种标记语言,很类似HTML.它被设计的宗旨是传输数据,而非显示数据.XML标签没有被预定义,需要 ...