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

最新推荐文章于 2022-10-08 09:15:30 发布

北凉冬

最新推荐文章于 2022-10-08 09:15:30 发布

阅读量100

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117200678

版权

vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

北凉冬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE学习：vue基础15————过滤器

提示：VUE学习：VUE学习：vue基础14————过滤器VUE学习：vue基础14————过滤器前言过滤器过滤器的使用模板化定义过滤器私有过滤器过滤器函数参数私有过滤器和全局过滤器重名多个过滤器自定义函数实现过滤器效果前言本文继续学习Vue相关内容。提示：以下是本篇文章正文内容，下面案例可供参考#过滤器过滤器的使用|叫做管道符<body><div id="app"> <p :title="msg">{{msg}}</p>
复制链接

扫一扫

专栏目录