过滤器:

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. 基于TensorFlow的深度学习系列教程 1——Hello World!

    最近看到一份不错的深度学习资源--Stanford中的CS20SI:<TensorFlow for Deep Learning Research>,正好跟着学习一下TensorFlow的基 ...

  2. 第86节：Java中的JQuery基础

    第86节:Java中的JQuery 前言复习 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display ...

  3. Kali学习笔记5：被动信息收集工具集

    1.Shodan SHODAN搜索引擎不像百度谷歌等,它们爬取的是网页,而SHODAN搜索的是设备. 物联网使用过程中,通常容易出现安全问题,如果被黑客用SHODAN搜索到,后果不堪设想. 网站:ht ...

  4. redux源码学习笔记 - createStore

    本篇是学习redux源码的一些记录,学习的redux版本是^4.0.1. 在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,UI状态等等···当页面的庞大时,状态就会变的混乱.r ...

  5. Ubuntu 18.04基本配置

    允许WinSCP使用root连接 默认是不允许的,具体方法出自这里(传送门),修改ssh配置,在/etc/ssh下,修改sshd_config文件 PermitRootLogin yes 即可.默认不 ...

  6. Java 虚拟机对锁优化所做的努力

    作为一款公用平台,JDK 本身也为并发程序的性能绞尽脑汁,在 JDK 内部也想尽一切办法提供并发时的系统吞吐量.这里,我将向大家简单介绍几种 JDK 内部的 "锁" 优化策略. 1 ...

  7. (转)python异步编程--回调模型(selectors模块)

    原文:https://www.cnblogs.com/zzzlw/p/9384308.html#top 目录 0. 参考地址 1. 前言 2. 核心类 3. SelectSelector核心函数代码分 ...

  8. vsCode 设置vue 保存自动格式化代码

    setting { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tab ...

  9. Kubernetes 服务入口管理 Traefik Ingress Controller

    前面部署了 kubernetes/ingress-nginx 作为 Ingress Controller,使用 Nginx 反向代理与负载,通过 Ingress Controller 不断的跟 Kub ...

  10. Pulsar Consumer实现介绍

    Pulsar-Consumer “Pulsar is a distributed pub-sub messaging platform with a very flexible messaging m ...