vue：过滤器

亦凉 2022-03-27 07:26 310阅读 0赞

# 一、过滤器 #

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

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

# 二、使用位置 #

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

<div>{
        {3 | addZero}}</div>
    
    <div v-bind:id="1 | addZero">11</div>

# 三、分类 #

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

## 1、全局过滤器 ##

示例代码如下：

效果：

![1033738-20181230220312989-1904281195.png][]

## 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>
        
        <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>
            
            <div v-bind:id="1 | addZero">11</div>
            <div v-bind:id="12 | addZero">15</div>
            
            <div>原始值：3.1415926，过滤后的值：{
        {3.1415926 | roundNum}}</div>
            
            <div>原始值：3.1415926，过滤后的值：{
        {3.1415926 | roundNumWithPara(3)}}</div>
        </div>
    </body>
    </html>

效果：

![1033738-20181230221617513-1319069649.png][]

# 四、过滤器应用实例 #

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

代码示例如下：

效果：

![1033738-20181230225018958-1565912091.png][]

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

代码示例如下：

效果：

![1033738-20181230225829823-1298942975.png][]

[1033738-20181230220312989-1904281195.png]: /images/20220327/2919f29dc82b4eafbabc2ddd936ba269.png
[1033738-20181230221617513-1319069649.png]: /images/20220327/35052ba4fcf548ef90ec3444720a2327.png
[1033738-20181230225018958-1565912091.png]: /images/20220327/34227c92c6754f4d862c6096cbad751d.png
[1033738-20181230225829823-1298942975.png]: /images/20220327/d86a910c27b64c25bca5ff230a98c9cf.png