過濾器介紹
- 過濾器用于用作一些常見的文本格式化，支援自定義過濾器，過濾器支援參數傳遞
- 僅mustache 插值和 v-bind 指令（2.1.0 以下版本不支援）可以使用過濾器
-
過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符連結：
{{表達式|過濾器1|過濾器2|過濾器3}}
簡單過濾器例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue之過濾器</title>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p>{{message | uppercase}}</p>
<p>{{message | reverse | uppercase}}</p>
</div>
<script>
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
new Vue({
el: '#app',
data: {
message:'hello world'
}
})
</script>
</body>
</html>
過濾器擴充
自定義全局過濾器
#全局過濾器所有地方都可以使用
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
自定義局部過濾器
#僅在el指定的dom及子節點中可以使用
new Vue({
el: '#add',
data:{
src:'hello'
},
filters: {
capitalize: function (value) {
alert(value);
return value+' suman';
}
}
});
傳遞參數給過濾器
過濾器是 JavaScript 函數，是以可以接受參數：
{{ message | filterA('arg1', arg2) }}
#這裡，message将傳給過濾器作為第一個參數
#字元串 'arg1' 将傳給過濾器作為第二個參數
#arg2 表達式的值将被求值然後傳給過濾器作為第三個參數。
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)