过滤器:

vue提供过滤器:

capitalize uppercase currency....

?
1
2
3
<div id="box">
    {{msg|currency ￥}}
  </div>

debounce 配合事件，延迟执行

?
1
2
3
<div id="box">
    <input type="text" @keyup="show | debounce 2000">
  </div>

数据配合使用过滤器:

limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="box">
    <ul>
      <!--取2个-->
      <li v-for="val in arr | limitBy 2">
        {{val}}
      </li>
      <br/>
      <br/>
      <!--取2个，从第arr.length-2个开始取-->
      <li v-for="val in arr | limitBy 2 arr.length-2">
        {{val}}
      </li>
    </ul>
  </div>
  <script>
    var vm=new Vue({
      data:{
        arr:[1,2,3,4,5]
      },
      methods:{
      }
    }).$mount('#box');
  </script>

vue插件filterBy 过滤数据
filterBy '谁'

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="box">
    <input type="text" v-model="a">
    <ul>
      <li v-for="val in arr | filterBy a">
        {{val}}
      </li>
    </ul>
  </div>
  <script>
    var vm=new Vue({
      data:{
        arr:['width','height','background','orange'],
        a:''
      },
      methods:{
      }
    }).$mount('#box');
  </script>

angular orderBy 排序

orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="box">
    <input type="text" v-model="a">
    <ul>
      <li v-for="val in arr | orderBy -1">
        {{val}}
      </li>
    </ul>
  </div>
  <script>
    var vm=new Vue({
      data:{
        arr:['width','height','background','orange'],
        a:''
      },
      methods:{
      }
    }).$mount('#box');
  </script>

自定义过滤器: model ->过滤 -> view

?
1
2
Vue.filter(name,function(input){
});
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="box">
    {{a | toDou 1 2}}
  </div>
  <script>
    Vue.filter('toDou',function(input,a,b){
      alert(a+','+b);
      return input<10?'0'+input:''+input;
    });
    var vm=new Vue({
      data:{
        a:9
      },
      methods:{
      }
    }).$mount('#box');
  </script>

时间转化器

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="box">
    {{a | date}}
  </div>
  <script>
    Vue.filter('date',function(input){
      var oDate=new Date(input);
      return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
    });
    var vm=new Vue({
      data:{
        a:Date.now()//返回1970 年 1 月 1日午夜与当前日期和时间之间的毫秒数。
      },
      methods:{
      }
    }).$mount('#box');
  </script>

50、选择器过滤html标记

双向过滤器:*

?
1
2
3
4
5
6
7
8
Vue.filter('filterHtml',{
　　read:function(input){ //model-view
　　　　return input.replace(/<[^<+]>/g,'');
　　},
　　write:function(val){ //view -> model
　　　　return val;
　　}
});

数据 -> 视图

model -> view

view -> model

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
  <script src="vue.js"></script>
  <script>
    //<h2>welcome</h2>
    Vue.filter('filterHtml',{
      read:function(input){ //model-view
        alert(1);
        return input.replace(/<[^<]+>/g,'');
      },
      write:function(val){ //view -> model
        console.log(val);
        return val;
      }
    });
    window.onload=function(){
      var vm=new Vue({
        data:{
          msg:'<strong>welcome</strong>'
        }
      }).$mount('#box');
    };
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg | filterHtml">
    <br>
    {{msg | filterHtml}}
  </div>
</body>
</html>

vue过滤器用法实例分析的更多相关文章

  1. Jackson的用法实例分析

    这篇文章主要介绍了Jackson的用法实例分析,用于处理Java的json格式数据非常实用,需要的朋友可以参考下 通俗的来说,Jackson是一个 Java 用来处理 JSON 格式数据的类库,其性能 ...

  2. Python实现的选择排序算法原理与用法实例分析

    Python实现的选择排序算法原理与用法实例分析 这篇文章主要介绍了Python实现的选择排序算法,简单描述了选择排序的原理,并结合实例形式分析了Python实现与应用选择排序的具体操作技巧,需要的朋 ...

  3. 使用PHPExcel操作Excel用法实例分析

    本文实例分析了使用PHPExcel操作Excel用法.分享给大家供大家参考.具体分析如下: PHPExcel下载地址:http://www.codeplex.com/PHPExcel http://w ...

  4. php中return的用法实例分析

    本文实例讲述了php中return的用法.分享给大家供大家参考.具体分析如下: 首先,它的意思就是返回;return()是语言结构而不是函数,仅在参数包含表达式时才需要用括号将其括起来.当返回一个变量 ...

  5. C#中sizeof的用法实例分析

    这篇文章主要介绍了C#中sizeof的用法,包括了常见的用法及注释事项,需要的朋友可以参考下.   sizeof是C#中非常重要的方法,本文就以实例形式分析C#中sizeof的用法.分享给大家供大家参 ...

  6. PHP消息队列用法实例分析

    这篇文章主要介绍了PHP消息队列用法,结合实例形式分析了PHP消息队列用于Linux下进程间通信的相关技巧,需要的朋友可以参考下   该消息队列用于linux下,进程通信 队列状态信息:具体参考手册

  7. ASP.NET中Dictionary基本用法实例分析

    本文实例讲述了ASP.NET中Dictionary基本用法.分享给大家供大家参考,具体如下: //Dictionary位于System.Collections.Generic命名空间之下 /*  * ...

  8. Javascript自定义事件功能与用法实例分析

    原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...

  9. sql小计汇总 rollup用法实例分析

    这里介绍sql server2005里面的一个使用实例: ),city ),score int) GO 1. 只有一个汇总 select province as 省,sum(score) as 分数 ...

随机推荐

  1. web安全Wargame—Natas解题思路（1-26）

    前言: Natas是一个教授服务器端Web安全基础知识的 wargame,通过在每一关寻找Web安全漏洞,来获取通往下一关的秘钥,适合新手入门Web安全. 传送门~ 接下来给大家分享一下,1-20题的 ...

  2. JS 实现触发下载内容(H5 download)

    概述 我对使用js控制下载非常感兴趣,在网上查资料的时候碰巧看到了相关实现方法,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: JS前端创建html或json文件并浏览器导出下载 理解DO ...

  3. 微信昵称的emoji的尝试性解决方案

    概述 之前分享过前端页面使用emoji,讨论了前端页面使用emoji的方法,但是微信昵称中的emoji怎么获取和显示呢?我查找了一些资料,把心得记录下来,供以后开发时参考,相信对其他人也有用. 转码问 ...

  4. Kubenetes---Service--实践

    1,编写创建svc的yaml文件 2,  创建service 3, 查看 4,查看svc代理那些pod , 当前没有 先创建deployment --> service 查看pod的label信 ...

  5. ALSA概述－－高级linux声音驱动基本介绍和应用

    基本介绍: ALSA是Advanced Linux Sound Architecture,高级Linux声音架构的简称,它在Linux操作系统上提供了音频和MIDI(Musical Instrumen ...

  6. ubuntu默认的Python版本号修改

    ubuntu默认的Python是2.7版本的,键入Python3 就可以使用Python3.X版本.下面修改默认的Python版本, 1.删除/usr/bin 下的Python链接 sudo rm / ...

  7. 解决删除chrome注册表残留问题

    将下面这个全部复制下来并粘贴到命名为“remove.reg”的文件中.双击执行即可  Windows Registry Editor Version 5.00 ;WARNING, this file  ...

  8. React Native IOS搭建开发环境

    安装 必须的软件 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast ...

  9. Abp + gRpc 如何实现用户会话状态传递

    0.背景 在实际项目当中,我们采用的是 Abp 框架,但是 Abp 框架官方并没有针对 Grpc 进行模块封装.基于此我结合 Abp 与 MagicOnion 封装了一个 Abp.Grpc 模块,它包 ...

  10. hibernate框架(1)---Hibernate增删改查

    Hibernate增删改查 1.首先我们要知道什么是Hibernate Hibernate是一个轻量级的ORMapping对象.主要用来实现Java和数据库表之间的映射,除此之外还提供数据查询和数据获 ...