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 遍历对象中的子对象
Jul 03 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
JavaScript实现多文件下载方法解析
Aug 07 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
17个Python小技巧分享
2015/01/23 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Python实战购物车项目的实现参考
2019/02/20 Python
python列表推导式入门学习解析
2019/12/02 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
精彩的英文自荐信
2014/01/30 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
八月迷情观后感
2015/06/11 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript