VUE学习：vue基础15————过滤器

最新推荐文章于 2025-02-18 23:34:27 发布

原创最新推荐文章于 2025-02-18 23:34:27 发布 · 163 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue.js 专栏收录该内容

29 篇文章

订阅专栏

本文详细讲解了Vue中的过滤器功能，包括如何使用管道符，模板化定义私有和全局过滤器，处理多个过滤器的顺序，以及自定义函数与过滤器的区别。实例演示了过滤器在字符串操作中的实际应用。

提示：
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>