脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue过滤器

vue中过滤器的用法

 更新时间：2022年03月14日 09:48:45   作者：.NET开发菜鸟  
这篇文章介绍了vue中过滤器的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、过滤器

过滤器是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中过滤器用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 使用vue实现加载页

    使用vue实现加载页

    这篇文章主要为大家详细介绍了使用vue实现加载页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Django Vue实现动态菜单和动态权限

    Django Vue实现动态菜单和动态权限

    本文主要介绍了Django Vue实现动态菜单和动态权限，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue3+vite中使用import.meta.glob的操作代码

    vue3+vite中使用import.meta.glob的操作代码

    在vue2的时候，我们一般引入多个js或者其他文件，一般使用  require.context 来引入多个不同的文件，但是vite中是不支持 require的，他推出了一个功能用import.meta.glob来引入多个，单个的文件，下面通过本文介绍vue3+vite中使用import.meta.glob,需要的朋友可以参考下
    2022-11-11
  • vue组件间通信子与父详解（二）

    vue组件间通信子与父详解（二）

    这篇文章主要为大家详细介绍了vue组件间通信子与父的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 使用Vuex实现一个笔记应用的方法

    使用Vuex实现一个笔记应用的方法

    这篇文章主要介绍了使用Vuex实现一个笔记应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 10分钟快速上手VueRouter4.x教程

    10分钟快速上手VueRouter4.x教程

    Vue Router目前最新版本是4.X，本文主要主要介绍了10分钟快速上手VueRouter4.x教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue.js上下滚动加载组件的实例代码

    Vue.js上下滚动加载组件的实例代码

    本篇文章主要介绍了Vue.js上下滚动加载组件的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 在Vue中进行数据分页的实现方法

    在Vue中进行数据分页的实现方法

    在前端开发中,数据分页是一个常见的需求,特别是当处理大量数据时,Vue作为一款流行的JavaScript框架,提供了强大的工具和生态系统来实现数据分页,本文将介绍如何在Vue中进行数据分页,以及如何设计一个通用的分页组件,需要的朋友可以参考下
    2023-10-10
  • Vue electron前端开启局域网接口实现流程详细介绍

    Vue electron前端开启局域网接口实现流程详细介绍

    用electron写了一个自己用的小软件，无后端，纯本地的数据。最近想着开发一个手机端app，将PC端的数据进行同步。为了这小小的功能单独写个后端又麻烦。干脆前后端不分离哈哈，直接在前端软件中开启接口
    2022-10-10
  • 详解Vue3如何优雅的监听localStorage变化

    详解Vue3如何优雅的监听localStorage变化

    最近在研究框架，也仔细用了Vue3一些功能，所以本文就来和大家聊聊Vue3如何实现优雅的监听localStorage的变化，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-06-06

最新评论