vue2.0过滤器filter全局和局部及传参
首先说全局,至少传一个本身的值。<div id="app">{{message | demo}}</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>&a
·
首先说全局,至少传一个本身的值。
<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');
更多推荐
已为社区贡献1条内容
所有评论(0)