VUE学习：vue基础15————过滤器
提示：
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>
