vue过滤器用法实例分析

更新时间：2019年03月15日 12:07:44 作者：白杨-M

这篇文章主要介绍了vue过滤器用法,结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项,需要的朋友可以参考下

本文实例讲述了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>

时间转化器

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

您可能感兴趣的文章:

基于Vue+element-ui 的Table二次封装的实现
这篇文章主要介绍了基于Vue+element-ui 的Table二次封装的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
前端低代码form-generator实现及新增自定义组件详解
这篇文章主要给大家介绍了关于前端低代码form-generator实现及新增自定义组件的相关资料,form-generator是一个开源的表单生成器,可以帮助我们快速构建各种表单页面,需要的朋友可以参考下
2023-11-11
如何利用Vue+Element做个小页面
vue使用element写东西让我感觉到了特别的方便,下面这篇文章主要给大家介绍了关于如何利用Vue+Element做个小页面的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
Vue驼峰与短横线分割命名中有哪些坑
这篇文章主要介绍了Vue驼峰与短横线分割命名中的注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-02-02
vue3+ts 依赖注入provide inject的用法
vue3中引入新的组件传值方式,就是provide/inject依赖注入模式,本文主要介绍了vue3+ts 依赖注入provide inject的用法,感兴趣的可以了解一下
2023-11-11
浅谈super-vuex使用体验
super-vuex是一套用于简化Vuex的数据架构。这篇文章主要介绍了浅谈super-vuex使用体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
Vue3系列教程之插槽slot详解
插槽（slot）可以说在一个 Vue 项目里面处处都有它的身影，比如我们使用一些UI 组件库的时候，我们通常可以使用插槽来自定义我们的内容，今天通过本文给大家介绍vue3插槽slot的相关知识，感兴趣的朋友一起看看吧
2022-08-08
vue使用Echarts设置数据无效问题记录及解决方法
这篇文章主要介绍了vue使用Echarts设置数据无效问题记录,本文通过场景分析给大家分享解决方法，需要的朋友可以参考下
2022-08-08
利用Vue.js指令实现全选功能
最近做了两个vue的项目，都需要实现全选反选的功能，两个项目用了两种实现方法，第一个项目用vue的computed，第二个项目用指令来实现，用起来，发觉指令更加方便。下面就来介绍如何利用指令来实现全选。
2016-09-09
vue中监听路由参数的变化及方法
这篇文章主要介绍了vue中监听路由参数的变化,给大家介绍了vue中监听路由参数变化的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12