10.Vue过滤器：filter

最新推荐文章于 2022-04-27 16:52:38 发布

高新园养鸡场

最新推荐文章于 2022-04-27 16:52:38 发布

阅读量291

点赞数

分类专栏： Vue 2.0 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/zyc3545/article/details/108209696

版权

Vue 2.0 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

特点

过滤器不能替代methods、computed或者watch。
过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。
在希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。不能用在v-html。

基本使用

全局过滤器

全局过滤器是创建一个 Vue.filter(‘过滤器的名称’,该过滤器的具体实现函数function) 。它的特点是作用于全部组件。

	<body>
		<div id="content">
			<!-- 使用“|”往插值后添加过滤器 -->
			<div>{{value | myGFilter}}</div>
		</div>
	</body>
	<script>
		//全局过滤器
		Vue.filter("myGFilter", function(msg){
			return msg.replace("直播","点播");
		});
		
		//先定义全剧过滤再定义Vue对象
		var vm = new Vue({
			el:"#content",
			data:{
				value:"直播升级，要保证直播的稳定，才能看到好的直播"
			}
		});
	</script>

打印结果为：
点播升级，要保证直播的稳定，才能看到好的直播

只替换了第一个点播，原因是replace(str1,str2)只替换msg中第一个str1，可以将str1传入正则表达式解决：

Vue.filter("myGFilter", function(msg){
    return msg.replace(/直播/g,"点播");
});

打印：
点播升级，要保证点播的稳定，才能看到好的点播

局部过滤器

局部过滤器就是通过filters属性（该属性是一个对象），在该对象中可以定义多个过滤器。它的特点是只能作用于本Vue控制区域内。

	<body>
		<div id="content1">
			<div>{{value1|myLFilter}}</div>
		</div>
		<div id="content2">
			<div>{{value2|myLFilter}}</div>
		</div>
	</body>
	<script>
		var vm1 = new Vue({
			el:"#content1",
			data:{
				value1:"直播升级，要保证直播的稳定，才能看到好的直播"
			},
			filters:{
				myLFilter:function(msg){
					return msg+"8888888";
				}
			}
		});
		
		var vm2 = new Vue({
			el:"#content2",
			data:{
				value2:"直播升级2，要保证直播的稳定2，才能看到好的直播2"
			}
		});
	</script>

结果打印：
直播升级，要保证直播的稳定，才能看到好的直播8888888
直播升级2，要保证直播的稳定2，才能看到好的直播2
可见content1的myLFilter并没有对content2产生效果，并且控制台报错Failed to resolve filter: myLFilter

添加参数

filters的function中，第一个参数为文本，后续为依次传入的参数。

	<body>
		<div id="content">
			<!-- myGFilter添加的参数将依次从function的第二个参数开始 -->
			<div>{{value | myGFilter("点播","888888888888")}}</div>
		</div>
	</body>
	<script>
		//全局过滤器
		Vue.filter("myGFilter", function(msg, arg1, arg2) {
			msg = msg.replace(/直播/g, "点播");
			msg = msg + arg2;
			return msg;
		});

		//先定义全剧过滤再定义Vue对象
		var vm = new Vue({
			el: "#content",
			data: {
				value: "直播升级，要保证直播的稳定，才能看到好的直播"
			}
		});
	</script>

运行：
点播升级，要保证点播的稳定，才能看到好的点播888888888888

串联过滤器

多个过滤器可以通过"|"进行串联。

	<body>
		<div id="content">
			<!-- 过滤器myGFilter和myGFilter2串联 -->
			<div>{{value | myGFilter("点播","888888888888") | myGFilter2}}</div>
		</div>
	</body>
	<script>
		Vue.filter("myGFilter", function(msg, arg1, arg2) {
			msg = msg.replace(/直播/g, "点播");
			msg = msg + arg2;
			return msg;
		});
		
		Vue.filter("myGFilter2", function(msg) {
			return msg + "---------->";
		});

		//先定义全剧过滤再定义Vue对象
		var vm = new Vue({
			el: "#content",
			data: {
				value: "直播升级，要保证直播的稳定，才能看到好的直播"
			}
		});
	</script>

运行：
点播升级，要保证点播的稳定，才能看到好的点播888888888888---------->

在v-html中使用过滤器

Vue2.0 不再支持在 v-html 中使用过滤器，有三种解决方法：

使用全局方法

// index.js
Vue.prototype.highlight= function (sTitle) {
  // to do
};

// *.vue
<div v-html="highlight(option.title)"></div>

使用 computed 属性

//html
<div v-html="newMsg"></div>

//vue
data() {
    return {
        oldMsg:"\n"
    }
},
computed :{
     newMsg(msg) {
         return this.oldMsg.replace("\n", "<br>");
     },
},

使用 $options.filters

//html
<div v-html="$options.filters.stateFilter('进行中')"></div>

//vue
    filters: {
        stateFilter: function(state) {
            switch (state) {
            	case "进行中":
            		return `<div class="state-doing">${state}</div>`;
            	case "已完成":
            		return `<div class="state-done">${state}</div>`;
            	default:
            		return `<div>${state}</div>`;
            }
        }
    }

案例：时间格式化

	<body>
		<div id="content">
			<div>现在时间是：{{currTime}}</div>
		</div>
	</body>
	<script>
		//先定义全剧过滤再定义Vue对象
		var vm = new Vue({
			el: "#content",
			data: {
				currTime: new Date()
			}
		});
	</script>

运行：
现在时间是：Tue Jun 25 2019 17:09:05 GMT+0800 (China Standard Time)

显然，上面打印的时间，并不符合日常阅读需求，可以通过filter将currTime格式化。

//html
<div>现在时间是：{{currTime | timeFormat}}</div>

//vue
Vue.filter("timeFormat", function(timeStr, pattern) {
    //根据当前时间
    var currDate = new Date(timeStr);
    var year = currDate.getFullYear();
    var month = currDate.getMonth();
    var day = currDate.getDay();
    if (pattern && pattern.toLowerCase() === "yyyy-mm-dd") {
    	return year + "-" + month + "-" + day;
    }
    
    var hour = currDate.getHours();
    var minutes = currDate.getMinutes();
    var seconds = currDate.getSeconds();
    return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
});

运行：
现在时间是：2019-6-25 17:38:8

需求已经满足，但是review代码，发现year + “-” + month + “-” + day + " " + hour + “:” + minutes + “:” + seconds这样的语句有颇多不便完全可以使用ES6的模板语句代替：

// return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;

运行：
现在时间是：2019-6-25 17:38:8

上面的时间格式并不完美，因为大众更习惯两位数的时间，如8显示为08，可以通过ES6的padStart(arg1长度, arg2填充字符)方法填充头部。

var month = (currDate.getMonth() + 1).toString().padStart("2","0");
var day = currDate.getDate().toString().padStart("2","0");
...
var hour = currDate.getHours().toString().padStart("2","0");;
var minutes = currDate.getMinutes().toString().padStart("2","0");
var seconds = currDate.getSeconds().toString().padStart("2","0");

运行：
现在时间是：2019-06-25 18:02:22

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="content">
			<div>现在时间是：{{currTime | timeFormat }}</div>
		</div>
	</body>
	<script>
		Vue.filter("timeFormat", function(timeStr, pattern) {
			//根据当前时间
			var currDate = new Date(timeStr);
			var year = currDate.getFullYear();
			var month = (currDate.getMonth() + 1).toString().padStart("2","0");
			var day = currDate.getDate().toString().padStart("2","0");
			if (pattern && pattern.toLowerCase() === "yyyy-mm-dd") {
				return `${year}-${month}-${day}`;
			}

			var hour = currDate.getHours().toString().padStart("2","0");;
			var minutes = currDate.getMinutes().toString().padStart("2","0");
			var seconds = currDate.getSeconds().toString().padStart("2","0");
			return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
		});

		//先定义全剧过滤再定义Vue对象
		var vm = new Vue({
			el: "#content",
			data: {
				currTime: new Date();
			}
		});
	</script>
</html>