提示:
VUE学习:VUE学习:vue基础15————过滤器
VUE学习:vue基础15————过滤器
前言
本文继续学习Vue相关内容。
提示:以下是本篇文章正文内容,下面案例可供参考#
过滤器
过滤器的使用
|叫做管道符
<body>
<div id="app">
<p :title="msg">{{msg}}</p>
<p :title="msg | my">{{msg | my}}</p>
</div>
</body>
<script>
/*全局过滤器*/
Vue.filter('my',function (value) {
return value.replaceAll('你','我');
});
let vm = new Vue({
el: "#app",
data: {
msg:"半山腰总是挤的,你得去山顶看看。",
},
});
</script>
模板化定义过滤器
<body>
<div id="app">
<p>{{msg2 | my2}}</p>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
msg2:"hello world。"
},
filters:{
my2:function (value) {
return value.toUpperCase();
},
}
});
</script>
私有过滤器
过滤器函数参数
过滤器函数参数超过一个时,需要额外给其他的参数传值,但是首个参数依然无需传值
<body>
<div id="app">
<p>{{msg2 | my3('你好','世界')}}</p>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
msg2:"hello world。"
},
filters:{
my3(value,arg1,agr2){
return value+arg1+agr2;
},
}
});
</script>
私有过滤器和全局过滤器重名
<body>
<div id="app">
<p :title="msg">{{msg}}</p>
<p :title="msg | my">{{msg | my}}</p>
</div>
</body>
<script>
/*全局过滤器*/
Vue.filter('my',function (value) {
return value.replaceAll('你','我');
});
let vm = new Vue({
el: "#app",
data: {
msg:"半山腰总是挤的,你得去山顶看看。",
},
filters:{
/*私有过滤器和全局过滤器重名的时候,私有过滤器生效!!!!*/
my(value){
return value.replaceAll('你','他');
},
}
});
</script>
多个过滤器
多个过滤器存在时会按照从左至右的顺序依次执行,my4的value是my过滤器的结果
<body>
<div id="app">
<p>{{msg | my | my4}}</p>
<p>{{msg | my4 | my}}</p>
</div>
</body>
<script>
/*全局过滤器*/
Vue.filter('my',function (value) {
return value.replaceAll('你','我');
});
let vm = new Vue({
el: "#app",
data: {
msg:"半山腰总是挤的,你得去山顶看看。",
},
filters:{
my4(value){
return value+"-你猜猜我是谁";
}
}
});
</script>
自定义函数实现过滤器效果
自定义函数也能够实现和过滤器相同的效果,但是过滤器功能更强大,针对性也更强,对内容的过滤操作推荐使用过滤器来完成。
<body>
<div id="app">
<!--自定义函数也能够实现和过滤器相同的效果,但是过滤器功能更强大,针对性也更强,对内容的过滤操作推荐使用过滤器来完成。-->
<p>{{my5(msg)}}</p>
<p>{{msg | my4}}</p>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
msg:"半山腰总是挤的,你得去山顶看看。",
},
methods: {
my5(value){
return value+"-你猜猜我是谁";
}
},
filters:{
my4(value){
return value+"-你猜猜我是谁";
}
}
});
</script>