1. 程式人生 > >Vue.js過濾器

Vue.js過濾器

過濾器的作用
在不改變資料的情況下,輸出前端需要的格式資料

過濾器的定義方法
Vue.filter(‘方法名’,function(val){});
過濾器的呼叫方法
{{ msg|方法名}}

注意事項

  1. 定義過濾器,必須放在Vue例項化前面
  2. 在沒有衝突的前提下,過濾器可以串聯

舉例應用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
	<div id="box">		
		<p>{{ msg|one|two }}</p>
	</div>
</body>
</html>
<script type="text/javascript">
	Vue.filter('one',function(val){
		return val+'油條'
	});
	Vue.filter('two',function(val){
		return val+'豆漿'
	});
	var vm = new Vue({
		el: '#box',
		data: {
			msg:'今天吃'	
		}	
	});
</script>

過濾器練習地址:https://blog.csdn.net/qq_39383675/article/category/8256374