1.はじめに
役割：フォーマットデータ
1.文法
//全局过滤器
Vue.filter('过滤器名称',function(value){
逻辑代码
return 结果
})
//局部过滤器
new Vue({
....
filters:{
过滤器名称:function(value){
},
...
过滤器n
}
})
2.使用する
<div>{
{
msg | 过滤器}}</div>
<div>{
{
msg | 过滤器1 | 过滤器2}}</div> //过滤器1返回的结果继续被过滤器2处理
<div v-bind:属性="msg | 过滤器" ></div> //对属性进行处理，不常用
3.例
<div id="app">
<input type="text" v-model="msg"/>
<!-- 方式一 -->
<div>{
{
msg | upperFirst}}</div>
<!-- 方式二 -->
<div>{
{
msg | upperFirst|upperLast}}</div>
<!-- 方式三 -->
<div v-bind:id="msg|upperFirst"></div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: ''
},
filters: {
upperFirst: function(value) {
return value.charAt(0).toUpperCase() + value.slice(1)
},
upperLast: function(value) {
return value.slice(0, value.length - 1) + value.charAt(value.length - 1).toUpperCase()
}
}
})
</script>
2.公式文書
Vue.jsを使用すると、いくつかの一般的なテキストフォーマットに使用できるフィルターをカスタマイズできます。フィルタは、二重中括弧の補間とv-bind式の2つの場所で使用できます（後者は2.1.0以降でサポートされています）。「パイプ」記号で示されるJavaScript式の最後にフィルターを追加する必要があります。
<!-- 在双花括号中 -->
{
{
message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
コンポーネントのオプションでローカルフィルターを定義できます。
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
または、Vueインスタンスを作成する前に、フィルターをグローバルに定義します。
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
グローバルフィルターとローカルフィルターの名前が同じ場合は、ローカルフィルターが使用されます。
次の例では、大文字のフィルターを使用しています。
フィルター関数は、常に式の値（前の一連の操作の結果）を最初の引数として受け取ります。上記の例では、capitalizefilter関数は最初のパラメーターとしてmessageの値を受け取ります。
フィルタは連結できます。
{
{
message | filterA | filterB }}
この例では、filterAは単一のパラメーターを受け取るフィルター関数として定義されており、式メッセージの値はパラメーターとして関数に渡されます。次に、フィルター関数filterBを呼び出し続けます。これも単一のパラメーターを受け取るように定義されており、filterAの結果をfilterBに渡します。
フィルタはJavaScript関数であるため、パラメータを受け取ることができます。
{
{
message | filterA('arg1', arg2) }}
ここで、filterAは、3つのパラメーターを受け入れるフィルター関数として定義されています。メッセージの値が最初のパラメーターとして使用され、通常の文字列'arg1'が2番目のパラメーターとして使用され、式arg2の値が3番目のパラメーターとして使用されます。ここで、filterAは、3つのパラメーターを受け入れるフィルター関数として定義されています。メッセージの値が最初のパラメーターとして使用され、通常の文字列'arg1'が2番目のパラメーターとして使用され、式arg2の値が3番目のパラメーターとして使用されます。