过滤器:

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. Canal学习笔记（客户端）

    前言 最近公司用到Canal来做从MySQL到Tidb的数据同步,用到HA模式Canal,记录一下HA模式的工作原理. Canal的架构模式 Canal是利用binlog日志来做数据同步,canal伪 ...

  2. Git使用详细教程(1)：工作区、暂存区、本地仓库、远程仓库

    之前的写过一篇如何在服务器上搭建Git服务Git服务器搭建,接下来的一段时间,我将详细的讲解Git的使用.看如下一张图片,本篇主要理解一些基本概念. 图中几个名词的意思如下: workspace: 工 ...

  3. GITHUB(github)初级使用

    Github顾名思义是一个Git版本库的托管服务,是目前全球最大的软件仓库,拥有上百万的开发者用户,也是软件开发和寻找资源的最佳途径,Github不仅可以托管各种Git版本仓库,还拥有了更美观的Web ...

  4. odoo开发笔记 -- 模型字段定义中设置默认值

    例如: company_id = fields.Many2one('res.company', string='Company', default=lambda self: self.env['res ...

  5. logstash常用插件解析

    官方地址:https://www.elastic.co/guide/en/logstash-versioned-plugins/current/index.html 配置文件写法: # 日志导入inp ...

  6. mysql 开发进阶篇系列 3 SQL 优化(索引使用方法)

    一. 本章介绍mysql中的索引的分类,存储,使用方法的介绍 1.  索引的存储分类 MyISAM存储引擎的表的数据和索引是自动分开存储的,各自是独立的一个文件, innodb 存储引擎的表的数据和索 ...

  7. Microsoft解读

    微软-这个在软件行业影响着我们这个时代 我们所了解的微软或许只在于windows操作系统和office办公软件.但是我们如果只这样认为,那就大错特错了,微软能成为全球互联网巨头,并不是那么简单.今天我 ...

  8. 介绍 JSON（摘自网络）

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...

  9. 浅入浅出Typescript Decorators

    临时起的兴趣,想写一篇关于ts decorator的文章,就花小半天整理了一下...  这东西,在ES2017里好像也有... 文档的话看这里. 因为临时,就没想写太多文字介绍,带少许文字说明直接开撸 ...

  10. 记一次eureka客户端注册失败的问题

    最近老大给了一台新服务器,做测试用,从装软件开始,到把整个环境搭起来,因为之前没有完成搭过,所以费了几天时间,最后总算是成功跑起来了.昨天早上来更新下项目,在测试服务器上重新发布了一下,结果发现服务注 ...