Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。使用格式爲：
<!-- 在兩個大括號中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>- 1
- 2
- 3
- 4
- 5
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue學習</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
.style{
color: red
}
</style>
<body>
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: "ssssssssssssss"
},
methods: {
},
filters: {
capitalize: function(value){
if(!value){
return ""
}else{
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
}
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
這裏的重點是下面需要配置一個filters，裏面的函數是過濾器，必須返回一個過濾後的value。
下一篇：Vue初體驗（六）組件化component