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 相关文章推荐
jquery选择器(常用选择器说明)
Sep 28 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
用 JSON 处理缓存
2007/04/27 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
Python中matplotlib中文乱码解决办法
2017/05/12 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
舞蹈毕业生的自我评价
2014/03/05 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
技术员个人工作总结
2015/03/03 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript
Java异常体系非正常停止和分类
2022/06/14 Java/Android