Vue详解（三）过滤器

最新推荐文章于 2024-07-18 15:02:06 发布
最新推荐文章于 2024-07-18 15:02:06 发布
阅读量2.6k 收藏
点赞数
分类专栏： Vue前端框架 文章标签： vue.js 前端 javascript vue 测试开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gao1213977085/article/details/121895827
版权

文章目录

Vue详解（三）过滤器

​ 过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结构的简单的函数。在实际项目开发中根据实际需求，可以自己编写所需要的过滤器。

​ 过滤器经常用在数据所需的格式化时使用：

  1. 字符串格式化。
  2. 日期时间的格式化。

例如：12.12.2050-10.10.10表示2050年12月12日，10点10分10秒，经过过滤器过滤（yyyy-MM-dd HH:mm:ss）后变为 2050-12-12 10:10:10

例如：字符串abcd经过filter，filter将小写字母变成大写字母的过滤器。最终展现在用户面前的字符串是ABCD。

​ 过滤器最大的作用就是体现其复用性，如果前端处理的某些文本信息每一次都需要经过重复的特殊处理，那么一定要编写一个过滤器来使用。

​

1.全局过滤器的使用

全局过滤器指的是所有vm对象都能共享使用过滤器。过滤器能够使用在两个地方：

  1. （mustache）插值表达式。
  2. 指令（bind）

过滤器的语法：使用管道符“|”

1.1将所有的字母变成大写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>
<body>   
    <div id="app">
      <!-- 
        使用过滤器的语法：
        {{内容|过滤器}}
       -->
      <p>{{str1 | ucase}}</p>
    </div>
    <script>
      // 自定义全局过滤器
      /**
       *  语法：Vue.filter
       *  参数1：为该过滤器命名
       *  参数2：该过滤器的行为
       *          函数参数：我们需要操作的数据
      */
      Vue.filter('ucase', function (value) {
        // 通过value的形参取得了需要操作的值（aaa）
        // 将值处理为大写字母
        value = value.toUpperCase();

        return value;
      });
      var vm =new Vue({
        el:"#app",
        data:{
          "str1":"aaa"
        }
      })      
    </script>
    
</body>
</html>

1.2 定义格式化时间的全局过滤器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">



        <p>{{currentTime | dateTimeManager}}</p>


    </div>
    <script>
        Vue.filter('dateTimeManager', function(dateTime) {
            // 取得日期 时间的具体数值
            // 将年月日时分秒分别取出，格式化为 2050-12-12 10：10：10

            var y = dateTime.getFullYear();
            // 不足两位 前面补零
            var m = dateTime.getMonth().toString().padStart(2, "0");
            var d = dateTime.getDate().toString().padStart(2, "0");

            var h = dateTime.getHours().toString().padStart(2, "0");
            var mm = dateTime.getMinutes().toString().padStart(2, "0");
            var s = dateTime.getSeconds().toString().padStart(2, "0");

            // 在ESS中，我们必须以使用+（拼接符）的形式来对字符串进行拼接的操作

            // return y + "-" + m + "-" + d;

            // ES6中，仅仅只使用反引号“ ` ”来解决复杂的字符串拼接的工作
            return `${y}-${m}-${d} ${h}-${mm}-${s}`;

        });

        var vm = new Vue({
            el: "#app",
            data: {
                "currentTime": new Date()
            }
        })
    </script>

</body>

</html>

1.3 过滤器在v-for中的使用

​ 将所有的商品进行打折（打8折 打9折）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">



        <p v-for="f in fruitList" ::key="f.id">
            {{f.name}}---------{{f.price | disCount5}}
        </p>

    </div>
    <script>
        Vue.filter('disCount8', function(value) {
            return parseInt(value) * 0.8;

        });

        Vue.filter('disCount5', function(value) {
            return parseInt(value) * 0.5;

        });

        var vm = new Vue({
            el: "#app",
            data: {
                "fruitList": [{
                    "id": "A0001",
                    "name": "苹果",
                    "price": 10
                }, {
                    "id": "A0002",
                    "name": "菠萝",
                    "price": 15
                }, {
                    "id": "A0003",
                    "name": "桃子",
                    "price": 8
                }]
            }
        })
    </script>

</body>

</html>

​ 以上的案例，都是使用在插值表达式之中，除了使用在插值表达式之中外，过滤器还可以用在bind属性指令当中。该形式没有插值表达式使用的广泛。

1.4. 可以连续使用多个过滤器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 
        连续使用多个管道符来连接多个过滤器
        {{str1 | 过滤器1 |过滤器2 | ....n}}
       -->
        <p>{{str1 | filter1 | filter2}}</p>
    </div>
    <script>
        // 过滤器1：将小写字母变成大写
        Vue.filter('filter1', function(value) {
            return value.toUpperCase();
        });
        // 过滤器2：在原有字符串的基础上，最后增加字符串123
        Vue.filter('filter2', function(value) {
            return value + "123";
        });

        var vm = new Vue({
            el: "#app",
            data: {
                "str1": "aaa"
            }
        })
    </script>

</body>

</html>

2.私有过滤器的使用

​ 私有过滤器指的是在指定的vm对象中来定义过滤器，该过滤器只在当前的vm对象中会发挥作用，其他的vm对象不能使用的。

​ 语法：在vm对象中指定过滤器相关的属性和属性值。

vm
	filters:{
        filter1
        filter2
        ....
    }W

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">

        <p>{{str1 | filter3}}</p>
    </div>
    <br>
    <br>
    <div id="app2">
        <!-- filter3无法生效 -->
        <p>{{str1 | filter3}}</p>
    </div>
    <script>
        // 过滤器1：将小写字母变成大写
        Vue.filter('filter1', function(value) {
            return value.toUpperCase();
        });
        // 过滤器2：在原有字符串的基础上，最后增加字符串123
        Vue.filter('filter2', function(value) {
            return value + "123";
        });

        var vm = new Vue({
            el: "#app",
            data: {
                "str1": "aaa"
            },
            filters: {
                filter3: function(value) {
                    return value + "bbb";
                }
            }
        })

        var vm1 = new Vue({
            el: "#app2",
            data: {
                "str1": "aaa"
            }
        })
    </script>

</body>

</html>

如果全局过滤器和私有过滤器的命名是一样的，那么默认使用的是私有过滤器。

​ 系统在使用过滤器的时候，根据名称去找相应的过滤器，先找私有的过滤器，如果没有私有的，则继续通过该名称寻找全局过滤器。

​ 这种方式称之为就近原则。（优先使用范围）

全局过滤器和私有过滤器是能够搭配在一起使用的。

        <p>{{str1 | filter1 | filter2 | filter3}}</p>

        <p>{{str1 | filter3 | filter2 | filter1}}</p>

​ 可以同时使用多个过滤器。排在前面的过滤器的处理结果传递到下一个过滤器中继续进行后续处理。

小高写BUG
关注
专栏目录
Vue2.0 v-for filter列表过滤功能的实现
12-09
使用计算属性app.js var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)" ], key: "" }, computed: { filterShoppingList: function () { // `this`
vue中的过滤器实例代码详解
10-16
在Vue.js中，过滤器是Vue的实例功能之一，旨在对文本进行格式化显示。它们可以用于模板插值和v-bind表达式中，提供了一种方便的方法来进行字符串格式化、货币转换、日期格式化等操作。过滤器分为全局过滤器和本地...
Vue学习-v-for条件过滤（五）
qq_42562636的博客
10-13 9515
效果： 话不多说没难度，直接代码 list格式如下： 1.v-for <div class="flex"> <h2>普通for循环</h2> <ul> <li v-for="(item,index) in list" :key="item.id">{{index}}---{{item.name}}</li> </ul> </div> 2.v-for条件过滤 <div class="flex"
Vue V-for循环数据，有条件的筛选
最新发布
前端小菜鸟也有人起的博客
07-18 207
Vue V-for循环数据，有条件的筛选
Vue3中V-for按条件过滤
scyaopo的博客
11-19 590
<el-icon title="移除"><Delete @click="item.hasDel=true;"/></el-icon></td>"是":"否" }}</td><tr><td>表头
v-for Vue列表渲染&列表过滤（使用计算属性、监视属性实现简单的搜索功能）&列表排序
weixin_55772633的博客
07-10 3281
使用 v-for 遍历对象，可以获取到三个参数，第一个参数为当前项的值（value），第二个参数为当前项对应的键（key），第三个参数为当前项的索引（index）。使用 v-for 遍历数组，可以获取到两个参数，第一个参数为当前正在遍历的数组的对象，第二个参数为当前数组的对象对应的索引（从0开始）。使用 v-for 遍历字符串，可以获取到两个参数，第一个参数为当前正在遍历的字符，第二个参数为当前字符对应的索引（从0开始）。items 是待循环的数据。item 是当前的循环项。
3.vue过滤器
qq_26144233的博客
01-19 286
过滤器概念 Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache 插值和 v-bind 表达式 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示 过滤器中的 function，第一个参数是管道符前面 传递过来的数据 过滤器调用时候的格式： {{value| 过滤器的名称}} 全局过滤器 Vue.filter(‘过滤器的名称’，f...
Vue基础2：v-for及过滤与排序
u013089490的博客
11-05 4526
1.v-for遍历数组 【v-for遍历数组语法】 v-for="item in items" tems：要遍历的数组，需要在vue的data中定义好； item：迭代得到的数组元素的别名。 【代码例子】 &lt;div id="app"&gt; &lt;ul&gt; &lt;li v-for="user in users"&gt; ..
详解Vue自定义过滤器的实现
11-29
比如创建一个 `cal` 过滤器，它接收三个参数并返回它们的和： ```javascript Vue.filter('cal', function (value, begin, xing) { return value + begin + xing; }); ``` ```html <p>{{ message | cal 10 20 }} `...
详解Vue2.0里过滤器容易踩到的坑
08-30
Vue 2.0 的过滤器系统相较于 Vue 1.0 发生了显著的变化，不再提供内置的过滤器，开发者需要自定义过滤器以满足特定的需求。这篇文章将深入探讨在 Vue 2.0 中使用过滤器时可能遇到的问题，并提供解决策略。 首先，让...
vue的过滤器filter实例详解
12-09
排版记录，点耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。 vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍： ...
vue的基本使用
weixin_53125457的博客
04-09 156
vue 渐进式JavaScript 框架 vue 的挂载点 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。 通过 el 属性 设置挂载点 const app = new Vue({ // #app 对应的是页面中的div#app el:'#app' }) 通过显示调用 $mount() 方法 const app = new Vue({ // #app 对应的是页
03-Vue: v-for就地更新、过滤器
weixin_51339105的博客
06-01 570
js原生数组变化 数组变化，把数组重新渲染，会影响重绘和回流（页面布局） v-for更新 循环出新的虚拟DOM结构，和旧的虚拟DOM解构对比，复用标签就地更新内容 真实DOM 在document对象上，渲染到浏览器上显示的标签 虚拟DOM 本质是保存节点信息，属性和内容的一个js对象 好处： 1.提高DOM更新的性能，不频繁的操作真实Dom,在内存中找到变化的部分，再更新真实DOM（打补丁）；1.同级比较—根元素变化，整个DOM数删除重建； 2.同级比较—根元素不变，属性改变 更新属性（dom复用，只更新
vue全局过滤器
weixin_43254676的博客
04-17 123
1.全局过滤器的使用 1.新建filter文件 /src/filters/index.js // 时间戳转日期格式 export function formatDate(value) { const date = new Date(value) const y = date.getFullYear() let MM = date.getMonth() + 1 MM = MM &lt...
vue中的过滤器
程序员徐小白的博客
02-08 546
1.vue的全局过滤器 作用：将数据传入到方法中进行操作 可使用的范围： 插值表达式中和v-bind表达式中 页面中的所有Vue实例对象控制的区域 使用： {{data中的数据名称 | 过滤器的名称}} 过滤器的定义语法（创建）： Vue.filter('过滤器名称',fuction(data){ //第一个参数是过滤器的管道符前的数据 //从第二个参数开始，就是在调用过滤器时传入的参数 //方法...
Vue2.0 v-for filter
weixin_34175509的博客
02-22 679
Vue2.0 v-for filter列表过滤功能 习惯使用angularjs的一定知道angularjs有一个ng-repeat filter的例子，可以很简单的过滤一个循环列表。而在使用VUE2.0的时候发现不能在v-for中使用filter功能。所以这里就来讨论一下如何实现这个列表过滤功能。 解决思路使用计算属性 使用计算属性app...
Vue filter-v-for 使用
weixin_30409849的博客
08-21 638
var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pep...
VUE指令(内容渲染指令{{}}，属性绑定指令v-bind，事件绑定指令v-on，双向绑定指令v-model，条件渲染指令v-show、v-if，列表渲染指令v-for)与过滤器，$event，
m0_47794838的博客
01-16 467
vue 指令，内容渲染指令v-text {{}} v-html、属性绑定指令v-bind:、事件绑定v-on:、条件渲染指令v-if，v-show、列表渲染指令v-for
Vue-自定义过滤器 通过管道符号|进行调研，支持多重过滤，在Vue v-for处理字符串
生命不止摸鱼不止
03-18 447
Vue-自定义过滤器 通过管道符号|进行调研，支持多重过滤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>自定义过滤...
Vue内置过滤器与自定义过滤器详解
"本文主要介绍Vue.js中的内置过滤器及其使用方法，同时涵盖自定义过滤器的创建。通过实例解析，帮助读者理解过滤器在数据处理中的应用，以实现数据格式化和过滤功能。" Vue.js是一个流行的前端框架，其内置的过滤器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值