4.Vueのカスタムフィルタ
2617 ワード
紹介する
カスタム命令と同様に、グローバルメソッドVueを用いることができる.フィルタ()は、フィルタIDとフィルタ関数の2つのパラメータを受信するカスタムフィルタを登録します.フィルタ関数は値をパラメータとし、変換後の値を返します.
本文
1.システムフィルタ
json lowercase uppercase filterBy注意点:Vue 2.0でシステムフィルタが除去されました
2.カスタムフィルタプライベートフィルタ:VM内のfiltersオブジェクトに定義されているすべてのフィルタがプライベートフィルタプライベートフィルタであるという弊害は、複数のVMで共有できず、コードの冗長性をもたらし、将来のメンテナンスコストが 高いことである.
カスタム命令と同様に、グローバルメソッドVueを用いることができる.フィルタ()は、フィルタIDとフィルタ関数の2つのパラメータを受信するカスタムフィルタを登録します.フィルタ関数は値をパラメータとし、変換後の値を返します.
本文
1.システムフィルタ
json lowercase uppercase filterBy注意点:Vue 2.0でシステムフィルタが除去されました
{{ msg | json }}-json
{{ msg | lowercase }} -
{{ msg | uppercase }}-
filterBy - -
2.カスタムフィルタ
{{ time | datefmt}}
new Vue({
el:'#app',
data:{
time:new Date()
},
filters:{
// VM filters
datefmt:function(input,str,s1){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
// ： yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
return fmtStr; //
}
}
});
</code></pre>
<ul>
<li> </li>
</ul>
<pre><code class="<body>"> <div id="app">
{{ time | datefmt }}
</div>
<script>
//1.0
Vue.filter('datefmt',function(input){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
// ： yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
return fmtStr; //
});
new Vue({
el:'#app',
data:{
time:new Date()
}
});
</code></pre>
<pre><code> ： ID
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
</code></pre>
<pre><code> ：
<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap 'before' 'after'"></span>
Vue.filter('wrap', function (value, begin, end) {
return begin + value + end
})
</code></pre>
<p>vue2.0 </p>
</article>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1190410574576590848"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">