vue 过滤器

Posted 2022-12-06 _jigr

过滤器

在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>

效果：