vue過(guò)濾器用法實(shí)例分析

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

這篇文章主要介紹了vue過(guò)濾器用法,結(jié)合實(shí)例形式總結(jié)分析了vue.js常見(jiàn)過(guò)濾器相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下

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

過(guò)濾器:

vue提供過(guò)濾器:

capitalize uppercase currency....

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

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

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

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

limitBy 限制幾個(gè)
limitBy 參數(shù)(取幾個(gè))
limitBy 取幾個(gè) 從哪開(kāi)始

<div id="box">
    <ul>
      <!--取2個(gè)-->
      <li v-for="val in arr | limitBy 2">
        {{val}}
      </li>
      <br/>
      <br/>
      <!--取2個(gè)，從第arr.length-2個(gè)開(kāi)始取-->
      <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 過(guò)濾數(shù)據(jù)
filterBy '誰(shuí)'

<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 誰(shuí) 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>

自定義過(guò)濾器: model ->過(guò)濾 -> 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>

時(shí)間轉(zhuǎn)化器

<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日午夜與當(dāng)前日期和時(shí)間之間的毫秒數(shù)。
      },
      methods:{
      }
    }).$mount('#box');
  </script>

過(guò)濾html標(biāo)記

雙向過(guò)濾器:*

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>

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: