Vue-过滤器和插件
过滤器
什么是过滤器
过滤器是将要显示的文本,进行格式化处理,然后显示处理,并没有改变原值
使用方法
全局方式
1
2
3Vue.filter('过滤器名称',function(value1,[value2,value3,...]){
<!--处理逻辑-->
})局部模式,仅在当前vue实例中使用
1
2
3
4
5
6
7var vm = Vue({
el:"#app",
filter:{
'过滤器名称':function(value1,[value2,value3,...]){
}
}
})使用范围
- v-bind
1
2<div v-bind:id="属性名称|过滤器名称"></div>
<div v-bind:id="属性名称|过滤器名称(value1,value2)"></div> - 大括号
1
2<div>{{属性名|过滤器名称}}</div>
<div>{{属性名|过滤器名称(value1,value2)}}</div>- 示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35<body>
<div id="app">
<h3>测试过滤器单个参数</h3>
<p>{{content|contentFilter}}</p>
<input type="text" :value="content|contentFilter">
<h3>测试过滤器多个参数</h3>
<p>{{score1|contentFilter02(score2,score3)}}</p>
<input type="text" :value="score1|contentFilter02(score2,score3)">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.filter('contentFilter',function (value) {
if(!value){
return ''
}
return value.toString().toUpperCase().replace('TMD','***').replace('SB','***')
})
var vm = new Vue({
el: "#app",
data:{
content: "You are SB,TMD",
score1:98,
score2:92,
score3:96,
},
filters:{
contentFilter02(v1,v2,v3){
return v1+v2+v3
}
}
})
</script>
</body>
- 示例
- v-bind
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com
文章标题:Vue-过滤器和插件
文章字数:352
本文作者:Aaron
发布时间:2019-12-08, 15:37:58
最后更新:2019-12-08, 16:21:55
原始链接:http://blog.linuxerbulo.com/2019/12/08/Vue-%E8%BF%87%E6%BB%A4%E5%99%A8%E5%92%8C%E6%8F%92%E4%BB%B6/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。