vue過濾器用法實例分析

更新時間：2019年03月15日 12:07:44 作者：白楊-M

這篇文章主要介紹了vue過濾器用法,結合實例形式總結分析了vue.js常見過濾器相關使用技巧與操作注意事項,需要的朋友可以參考下

本文實例講述了vue過濾器用法。分享給大家供大家參考，具體如下：

過濾器:

vue提供過濾器:

capitalize uppercase currency....

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

debounce 配合事件，延遲執(zhí)行

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

數(shù)據(jù)配合使用過濾器:

limitBy 限制幾個
limitBy 參數(shù)(取幾個)
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 過濾數(shù)據(jù)
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日午夜與當前日期和時間之間的毫秒數(shù)。
      },
      methods:{
      }
    }).$mount('#box');
  </script>

過濾html標記

雙向過濾器:*

Vue.filter('filterHtml',{
　　read:function(input){ //model-view
　　　　return input.replace(/<[^<+]>/g,'');
　　},
　　write:function(val){ //view -> model
　　　　return val;
　　}
});

數(shù)據(jù) -> 視圖

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程序設計有所幫助。

您可能感興趣的文章: