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 相关文章推荐
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
简单的渐变轮播插件
Jan 12 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
利用javaScript处理常用事件详解
Apr 14 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调用C#开发的dll类库方法
2014/07/28 PHP
Smarty模板语法详解
2019/07/20 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python3 replace()函数使用方法
2018/03/19 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
Django缓存Cache使用详解
2020/11/30 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
以下的初始化有什么区别
2013/12/16 面试题
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
顺丰快递Java软件工程师面试题
2015/07/31 面试题
学生会招新策划书
2014/02/14 职场文书
出生医学证明书
2014/09/15 职场文书
实施意见格式范本
2015/06/05 职场文书
初中地理教学反思
2016/02/19 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL