vue 过滤器

Posted 2021-07-04 //我是小白

过滤器

在vue中 什么是过滤器
顾名思义，过滤就是蒋串数据经历过滤之后得到我们想要的数据，例如一串小写字符串 “action speak louder than words” 我们需要将这一串字符串的每个单词首字母变成大写，这时候我们便需要用到过滤器，在vue中我们根据自己的需求来自己定义过滤器。

过滤器的类别
1、全局过滤器

Vue.filter("filterName",function(val){
	......
	return val;
})

2、局部过滤器

filters:{
	filterName:function(val){
	......
	return val;
    }
}

使用方法
1、双花括号中

{{ text | filterName}}

2、在v-bind表达式中使用

代码示例

我们通过一个案例来进一步了解过滤器，实现将字符串的每个单词首字母变成大写

css

#box{
	width: 600px;
	height: 150px;
	border-radius: 20px;
	box-shadow: 5px 5px 10px cornflowerblue;
	font-size: 32px;
	text-align: center;
	margin:0px auto;
	line-height: 150px;
	background-color: antiquewhite;
}

html

<div id="box">
	<p class="show">{{text | tranformfilters}}</p>
</div>

js

<script type="text/javascript">
	var ve=new Vue({
		el:"#box",
		data:{
			text:"action speak louder than words"
		},
		filters:{
			tranformfilters:function(val){
				var strs=val.split(" ");
				var result="";
				for(var i=0;i<strs.length;i++){
					result+=(strs[i].charAt(0).toUpperCase()+strs[i].substring(1)+" ")
				}
				return result;
			}
		}
	})
</script>

效果：