Vue.js - フィルタ
カスタムフィルタ
フォーマット：
Vue.filter（ '上部'、関数（ヴァル）{
リターンval.charAt（0）.toUpperCase（）+ val.slice（1）;
}）;
使用フィルタ：
補間式：
の<div> MES {{|}}アッパー</ div>
プロパティバインディング：
<DIV：ABC = "MES |アッパー">テストデータ</ div>
<script type="text/javascript">
window.onload = function () {
Vue.filter('upper', function (val) { upper表示过滤器的名字，
return val.charAt(0).toUpperCase() + val.slice(1);
});
var vm = new Vue({
el:'#app',
data:{
mes: ' '
},
methods:{
}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="mes">
<div>{{mes| upper}}</div>
</div>
</body>
結果を表示します：
第二に、ローカルフィルタ
- のみ、内部の部品に使用することができます
使用方法：データ書き込みデータフィールドの行で、
フィルター：{部分フィルタ
アッパー：関数（ヴァル）{
リターンval.charAt（0）.toUpperCase（）val.slice +（1）;
}
}
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el:'#app',
data:{
mes: ''
},
filters:{ 局部过滤器
upper:function (val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="mes">
<div>{{mes|upper}}</div>
<div :abc="mes | upper">测试数据</div>
</div>
</body>
結果を表示します：
