Vue从入门到实战：过滤器的串联

来自CloudWiki
跳转至： 导航， 搜索

过滤器总是接收管道符（|）前的表达式作为第一个参数，

利用该特性，可以将多个过滤器通过管道符串联起来使用，形成类似于方法链的调用形式。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<p>{{message | uppercase | reverse}}</p>
		</div>
	
		<script src="vue.js"></script>
		<script>
			Vue.filter('uppercase', function (value) {
			  if (!value) return '';
			  value = value.toString();
			  return value.toUpperCase();
			})
			
			Vue.filter('reverse', function (value) {
			  if (!value) return '';
			  value = value.toString();
			  return value.split('').reverse().join('');
			})
			
			var vm = new Vue({
		    el: '#app',
		    data: {
		    	message: 'hello world'
		    }
		  });
		</script>
	</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：过滤器的串联&oldid=24925”