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 ...
随机推荐
- SpringBoot项目部署
项目背景 个人博客:http://www.huangyichun.cn/blog/8 采用SpringBoot开发的个人博客,部署到腾讯云服务器上,服务器系统为ubuntu16.04, ...
- centos7安装mysql（转载）
Centos7安装并配置mysql5.6完美教程 Centos7将默认数据库mysql替换成了Mariadb,对于我们这些还想使用mysql的开发人员来说并不是一个好消息.然而,网上关于Linux安装 ...
- 【转】Docker基础
一.简介 Docker是一个开源的应用容器引擎,使用Go语言开发,基于Linux内核的CGroup.Namespace.Union FS等技术实现的一种系统级虚拟化技术. 特性 更高效的利用系统资源: ...
- LVS（Linux Viretual Server） 负载均衡器 + 后端服务器
##定义: LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统. ##结构: 一般来说,LVS集群采用三层结构,其主要组成部分为: A.负载调 ...
- Service(服务)简单使用
1.Service(服务)是一个一种可以在后台执行长时间运行操作而没有用户界面的应用组件.服务可由其他应用组件启动(如Activity),服务一旦被启动将在后台一直运行,即使启动服务的组件(Activ ...
- 使用 Sublime 或其他编辑器调试 Tampermonkey 油猴脚本
作者说由于 Chrome 安全限制,没办法调用外部编辑器调试,但提供了一个间接办法,那就是脚本中使用@require file:///引入本地文件的形式,具体的方法是 打开 chrome://exte ...
- 使用其他Java工程导入hadoop源码用于在hadoop工程中查看源码
疑问:在开发hadoop程序的时候,有时候需要查看hadoop的源码,但是开发环境看不到,甚是烦恼,经过网上搜索和琢磨,终于实现了,虽然有点绕,但是目的达到了. 第一步:下载hadoop的源码包:ha ...
- FaceBook SDK登录功能实现(Eclipse)
由于公司游戏要进行海外推广,所以要我们接入FBSDK 实现登录,分享,投放,所以写这篇文章,也算是个工作总结.1.资料 (1).FB SDK github源码地址为 (2): [FB SDK中文接入文 ...
- 使用highcharts动态绘制折线图——so easy
之前学习highcharts发现网上的教程大部分是对highcharts数据的注释,如何动态绘制数据大部分一笔带过,让那些初涉开发的小白云里雾里,所以我就写了一篇这样的博客. <html> ...
- Use gdb attach pid and debug it