vue过滤器用法实例分析


Posted in Javascript onMarch 15, 2019

本文实例讲述了vue过滤器用法。分享给大家供大家参考,具体如下:

过滤器:

vue提供过滤器:

capitalize uppercase currency....

<div id="box">
    {{msg|currency ¥}}
  </div>

debounce 配合事件,延迟执行

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

数据配合使用过滤器:

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

<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>

filterBy 过滤数据
filterBy '谁'

<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>

orderBy 排序

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

<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

Vue.filter(name,function(input){
});
<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>

vue过滤器用法实例分析

时间转化器

<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>

过滤html标记

双向过滤器:*

Vue.filter('filterHtml',{
read:function(input){ //model-view


return input.replace(/<[^<+]>/g,'');

},

write:function(val){ //view -> model


return val;

}
});

数据 -> 视图

model -> view

view -> model

<!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.js程序设计有所帮助。

Javascript 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
js实现全选和全不选功能
Jul 28 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 #Javascript
详解vue移动端项目代码拆分记录
Mar 15 #Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 #Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 #Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 #Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 #Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 #Javascript
You might like
php Smarty 字符比较代码
2011/02/27 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php构造函数的继承方法
2015/02/09 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python中的super()方法使用简介
2015/08/14 Python
python查看模块,对象的函数方法
2018/10/16 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python 命名规范知识点汇总
2020/02/14 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
程序员机试试题汇总
2012/03/07 面试题
编辑找工作求职信分享
2014/01/03 职场文书
餐厅筹备计划书
2014/04/25 职场文书
公司租车协议书
2015/01/29 职场文书
个人借条范本
2015/05/25 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
财务年终工作总结大全
2019/06/20 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书