vue2.0過濾器filter全域性和區域性及傳參
阿新 • • 發佈:2019-01-24
首先說全域性,至少傳一個本身的值。
<div id="app"> {{message | demo}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 全域性 // 這裡至少傳一個本身的值 Vue.filter('demo',function(val){ return val + ' vue!'; }) new Vue({ data: { message:'hello' } }).$mount('#app'); </script>
接下來是全域性傳多個引數
<div id="app"> <!--這裡把其他引數括號括起來--> {{message | demo('canshu1','canshu2')}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 全域性 // 這裡至少傳一個本身的值 Vue.filter('demo',function(val,first,second){ return val + first + second; }) new Vue({ data: { message:'hello' } }).$mount('#app');
然後是全域性傳多個過濾器
<div id="app"> <!--多個全域性過濾器--> {{message | demo | demo2}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.filter('demo',function(val){ return val + ' demo1 '; }) Vue.filter('demo2',function(val){ return val + ' demo2!'; }) new Vue({ data: { message:'hello' } }).$mount('#app'); </script>
最後是區域性過濾器
<div id="app">
<!--多個區域性過濾器-->
{{message | demo | demo2}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
data: {
message:'hello'
},
// 區域性過濾器定義一個fileters,在其裡面寫過濾器
filters:{
demo:function(val){
return val + ' demo1 ';
},
demo2:function(val){
return val + ' demo2!';
}
}
}).$mount('#app');