vue中过滤器的用法

2024-04-02 19:04:59 730人浏览独家记忆

摘要

一、过滤器过滤器是Vue中的一个特性，作用是用于对文本进行格式化的作用。注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器二、使用位置过滤器

一、过滤器

过滤器是Vue中的一个特性，作用是用于对文本进行格式化的作用。

注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器

二、使用位置

过滤器只能应用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。例如：

<!--在双花括号中使用 格式：{{值 | 过滤器的名称}}-->
<div>{{3 | addZero}}</div>
<!--在v-bind中使用 格式：v-bind:id="值 | 过滤器的名称"-->
<div v-bind:id="1 | addZero">11</div>

三、分类

过滤器分为以下两种类型：

1、全局过滤器

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta Http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 定义全局过滤器
           Vue.filter("addZero",function(value){
               // 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
               return value<10?"0"+value:value;
           });
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
        <!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
        <div>{{3 | addZero}}</div>
        <div>{{15 | addZero}}</div>
        <!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
        <div v-bind:id="1 | addZero">11</div>
        <div v-bind:id="12 | addZero">15</div>
    </div>
</body>
</html>

效果：

2、本地过滤器

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 定义全局过滤器
           Vue.filter("addZero",function(value){
               // 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
               return value<10?"0"+value:value;
           });
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
               },
               // 方法
               methods:{

               },
               // 定义本地过滤器
               filters:{
                   roundNum:function(value){
                       // 四舍五入 小数点后保留两位
                       return value.toFixed(2);
                   },
                   roundNumWithPara:function(value,digit){
                       // 根据digit返回相应位数的小数
                       return value.toFixed(value,digit);
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
        <!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
        <div>{{3 | addZero}}</div>
        <div>{{15 | addZero}}</div>
        <!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
        <div v-bind:id="1 | addZero">11</div>
        <div v-bind:id="12 | addZero">15</div>
        <!--使用本地过滤器-->
        <div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNum}}</div>
        <!--保留小数点后3位-->
        <div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNumWithPara(3)}}</div>
    </div>
</body>
</html>

效果：

四、过滤器应用实例

1、使用过滤器实现省略号

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用过滤器实现省略号</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
                msg:'hello world',
               },
               // 方法
               methods:{

               },
               // 定义本地过滤器
               filters:{
                  // 显示省略号
                  toShowEllipsis:function(value,len){
                    if(value ==='' || value=== undefined || value===null) return;
                        if(value.length >= len){
                            var str = value.substr(0,len);
                            return str + '...';
                        }else {
                            return value;
                        }
                  }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
                <!--添加省略号    12345...-->
        <input type="text" v-model="msg" >
        {{msg | toShowEllipsis(6)}}
    </div>
</body>
</html>

效果：

2、使用过滤器处理时间戳

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用过滤器处理时间戳</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
                curTime:1546181790
               },
               // 方法
               methods:{

               },
               // 定义本地过滤器
               filters:{
                  // 处理时间戳  将时间戳转换成具体时间
                  toTimeStamp:function(value){
                          //d   表示日期   t 日期和时间
                        var d = new Date(value*1000);
                        return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()
                  }
                  
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
        <!--时间戳-->
        <p>当前时间：{{curTime | toTimeStamp }}</p>
    </div>
</body>
</html>

效果：

到此这篇关于vue中过滤器用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue中过滤器的用法

本文链接: https://www.lsjlt.com/news/142347.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

vue中过滤器的用法

一、过滤器过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器二、使用位置过滤器...

99+

2024-04-02
VUE中的filters过滤器使用方法

目录前言一、全局过滤器1、全局过滤器之单一挂载2、全局过滤器之批量挂载二、组件过滤器前言 Vue.js 允许我们自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双...

99+

2024-04-02
VUE过滤器的使用方法

这篇文章主要讲解了“VUE过滤器的使用方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“VUE过滤器的使用方法”吧！1. 定义一个日期格式化函数都9012了...

99+

2024-04-02
Vue中过滤器怎么用

这篇文章主要为大家展示了“Vue中过滤器怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue中过滤器怎么用”这篇文章吧。前言最近在项目的开发中，出现一些格...

99+

2024-04-02
VUE中filters过滤器的两种用法实例

目录前言一、全局过滤器全局过滤器之单一挂载全局过滤器之批量挂载二、组件过滤器附：过滤器中传入多个参数总结前言 Vue.js 允许我们自定义过滤器，可被用于一些常见的文本格式化。过滤器...

99+

2024-04-02
Vue中过滤器怎么使用

这篇文章主要讲解了“Vue中过滤器怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中过滤器怎么使用”吧！过滤器其本质其实就是函数，作用在于用户输入数据用户，能够进行处理，并且返回...

99+

2023-06-03
vue中过滤器filter怎么用

这篇文章主要为大家展示了“vue中过滤器filter怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中过滤器filter怎么用”这篇文章吧。示例<...

99+

2024-04-02
vue中过滤器如何使用

这篇文章主要介绍“vue中过滤器如何使用”，在日常操作中，相信很多人在vue中过滤器如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中过滤器如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧...

99+

2023-06-29
Vue过滤器使用方法详解

目录前言过滤器私有过滤器插值表达式中使用v-bind属性绑定全局过滤器前言本篇来学习vue(仅适用vue2)中过滤器的基本用法过滤器过滤器（Filters）是vue为开发者提供...

99+

2022-12-15

Vue过滤器的作用 Vue过滤器如何使用 Vue过滤器
Vue中的过滤器(filter)详解

目录过滤器使用位置全局过滤器、局部过滤器全局过滤器：局部过滤器：过滤器中传入多个参数：多个过滤器串联：官方文档：https://cn.vuejs.org/v2/guide...

99+

2022-11-13

Vue中的过滤器 Vue filter过滤器 vue filter
VUE中的filters过滤器如何使用

这篇文章主要讲解了“VUE中的filters过滤器如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“VUE中的filters过滤器如何使用”吧！前言Vue.js 允许我们自定义过滤器，可...

99+

2023-06-29
Vue 中filters过滤器如何使用

这篇文章给大家介绍Vue 中filters过滤器如何使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。1、示例代码采用vue单文件组件，使用moment插件格式化日期<templ...

99+

2024-04-02
Vue中如何使用filters过滤器

这篇文章主要为大家展示了“Vue中如何使用filters过滤器”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue中如何使用filters过滤器”这篇文章吧。Vue.js 允许我们自定义过滤器，...

99+

2023-06-29
vue中内置过滤器怎么用

小编给大家分享一下vue中内置过滤器怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！前言vue中过滤器filters的作用是...

99+

2024-04-02
Vue中全局常用的过滤方法解读

目录1.将整数部分逢三一断2.将数据格式化为金额3.展示时，字数超出10个字的后面省略4.格式化日期为YYYY-MM-DD5.格式化日期为YYYY-MM-DD HH:mm:ss总结全...

99+

2023-01-28

Vue全局 Vue过滤方法 Vue全局过滤
vue中的局部过滤器和全局过滤器代码实操

v-model：绑定的value v-bind：绑定的type <html> <head> <script src="https://c...

99+

2024-04-02
vue如何使用过滤器

在vue中使用过滤器的方法：1.新建vue.js项目；2.使用import方法引入filter过滤器；3.全局注册过滤器；4.执行命令直接引用；具体步骤如下：首先，在vue-cli中创建一个vue.js项目；vue create proje...

99+

2024-04-02
Vue的filters过滤器怎么使用

本篇内容主要讲解“Vue的filters过滤器怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue的filters过滤器怎么使用”吧!1、示例代码采用vue单文件组件，使用moment插...

99+

2023-07-04
Vue中的过滤器如何声明与使用

这篇文章主要讲解了“Vue中的过滤器如何声明与使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中的过滤器如何声明与使用”吧！一、什么是过滤器过滤器提供给我们的一种数据处理方式。过滤器...

99+

2023-07-05
Vue中过滤器定义以及使用方法实例

目录介绍Vue中过滤器如何使用组件内过滤器全局过滤器补充：vue中的过滤器可以格式化以及美化内容总结介绍过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用...

99+

2022-11-13

vue过滤器的使用 vue的过滤器 vue的过滤器语法