Vue从入门到实战:过滤器的参数

来自CloudWiki
跳转至: 导航搜索

过滤器总是接收表达式的值作为第一个参数,如{{message|capitalize}},message的值将作为capitalize过滤器函数的第一个参数。

过滤器本质上是一个js函数,自然也可以接收多个参数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<p>{{filename | format('vue', suffix)}}</p>
		</div>
	
		<script src="vue.js"></script>
		<script>
			Vue.filter('format', function (value, prefix, suffix) {
			  if (!value) return '';
			  value = value.toString();
			  return prefix + "-" + value + "." + suffix;
			})
			
			var vm = new Vue({
		    el: '#app',
		    data: {
		    	filename: 'filters',
		    	suffix: 'js'
		    }
		  });
		</script>
	</body>
</html>

filter的值作为format过滤器的第一个参数,普通字符串‘vue'作为第二个参数,第三个参数是suffix