Vue過(guò)濾器的用法和自定義過(guò)濾器使用

更新時(shí)間：2017年02月08日 11:46:20 作者：香農(nóng)·良

本篇文章主要介紹了Vue過(guò)濾器的用法和自定義過(guò)濾器，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1、過(guò)濾器的用法,用 ‘|' 分割表達(dá)式和過(guò)濾器。

例如：{{ msg | filter}} {{msg | filter(a)}} a就標(biāo)識(shí)filter的一個(gè)參數(shù)。

用兩個(gè)過(guò)濾器：{{msg | myfilter | myfilternumber }}

2、自定義的過(guò)濾器

過(guò)濾器的結(jié)構(gòu)為：Vue.filter("id",function(value,a){});

value是過(guò)濾器的一個(gè)參數(shù)，也是默認(rèn)的原始值。a是自定義的一個(gè)參數(shù)。

自定義過(guò)濾器的例子：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="vue.js"></script>
  <style>

  </style>
</head>

<body>
  <div id="app">
    <!--輸出的字符串中a的個(gè)數(shù)-->
    <span>msg的值：{{msg}},其中a的個(gè)數(shù)：</span> {{msg | myfilter('a')}}
    <br>
    <!--輸出的字符串中b的個(gè)數(shù)-->
    <span>msg的值：{{msg}},其中b的個(gè)數(shù)：</span> {{msg | myfilter | myfilternumber}}

  </div>
</body>
<script type="text/javascript">
  Vue.filter("myfilter", function(value, arg) {
    //返回一個(gè)對(duì)象或者json字符串，列出字符串中的字符以及字符的個(gè)數(shù),不區(qū)分大小寫
    var obj = {};
    var s = value.split('').sort().join("");
    var reg = /(.)\1+/ig;
    var str = s.replace(reg, "$1"); //字符串去重后的結(jié)果
    var i = 0,
      n,
      a;
    while (s.length > 0) {
      a = str.charAt(i);
      n = s.lastIndexOf(a) + 1;
      obj[a] = n;
      s = s.substring(n);
      i++;
    }
    return arg ? obj[arg] : obj;
  });
  Vue.filter("myfilternumber", function(value) {
    return value.b;
  });
  var app1 = new Vue({
    el: "#app",
    data: {
      msg: "a1a1aba2babac"

    },
    methods: {

    }
  });
</script>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中對(duì)組件二開(kāi)解決思路以及方案
這篇文章主要介紹了Vue中對(duì)組件二開(kāi)解決思路以及方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2023-04-04
vue.js實(shí)現(xiàn)h5機(jī)器人聊天（測(cè)試版）
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)h5機(jī)器人聊天測(cè)試版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新
今天小編就為大家分享一篇VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
Vue中的scoped實(shí)現(xiàn)原理及穿透方法
這篇文章主要介紹了Vue中的scoped實(shí)現(xiàn)原理及穿透方法,本文通過(guò)實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-05-05
vue使用axios跨域請(qǐng)求數(shù)據(jù)問(wèn)題詳解
這篇文章主要為大家詳細(xì)介紹了vue使用axios跨域請(qǐng)求數(shù)據(jù)的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
vue獲取el-form的整體驗(yàn)證狀態(tài)
本文主要介紹了vue獲取el-form的整體驗(yàn)證狀態(tài)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue3中的組件間的傳值(props)
這篇文章主要介紹了vue3中的組件間的傳值(props)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
這篇文章主要介紹了vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue.js實(shí)戰(zhàn)之通過(guò)監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn)
監(jiān)聽(tīng)事件是我們?cè)谑褂胿ue.js的時(shí)候經(jīng)常使用的一個(gè)功能，下面這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之通過(guò)監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn) 的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-04-04
rollup3.x+vue2打包組件的實(shí)現(xiàn)
本文主要介紹了rollup3.x+vue2打包組件的實(shí)現(xiàn)，詳細(xì)的介紹了打包會(huì)存在的問(wèn)題，包版本的問(wèn)題，babel 轉(zhuǎn)換jsx等問(wèn)題，具有一定的參考價(jià)值，感興趣的可以了解一下
2023-03-03