快捷導(dǎo)航

Vue2中的過(guò)濾器filter使用及注意說(shuō)明

更新時(shí)間：2022年09月14日 09:59:08 作者：未可知。

這篇文章主要介紹了Vue2中的過(guò)濾器filter使用及注意說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue2中的過(guò)濾器是什么

什么是vue的過(guò)濾器

過(guò)濾器可以通俗理解成是一個(gè)特殊的方法，用來(lái)加工數(shù)據(jù)的

比如枚舉值可以使用過(guò)濾器：如 1 2 3 4 對(duì)應(yīng) 成功失敗進(jìn)行中已退回比如價(jià)格后面跟個(gè)過(guò)濾器，將價(jià)格格式化成小數(shù)點(diǎn)兩位比如時(shí)間格式化等，又比如可以過(guò)濾聊天中的某些臟話

過(guò)濾器怎么寫

  <div id="app">
        <h3>過(guò)濾器基本使用</h3>
      //   <!--在雙花括號(hào)中使用全局過(guò)濾器 格式：{{值 | 過(guò)濾器的名稱}}-->
        <p> {{content|contentFilter}} </p>
     //    <!--在v-bind中使用全局過(guò)濾器 格式：v-bind:id="值 | 過(guò)濾器的名稱"-->
        <p v-bind:id="1 | addZero">11</p>
        <h3>過(guò)濾器接收參數(shù)</h3>
        <p> {{ num1| add(num2,num3)}} </p>
    </div>

Vue.filter('contentFilter', function (value) {
            //全局過(guò)濾器
            if (!value) {
                return ""
            }
            return value.toUpperCase().replace('TMD', '*不許說(shuō)臟話噢*').replace('SB', '*不許說(shuō)臟話噢*')
        })
         Vue.filter("addZero",function(value){
               // 如果value的值小于10則在前面添加0然后返回，否則直接返回value值
               return value<10?"0"+value:value;
           });
        new Vue({
            el: '#app',
            data: {
                content: '小伙子,TMD就是個(gè)sb',
                num1: 40,
                num2: 60,
                num3: 70,
            },
             filters: {
                //局部過(guò)濾器(本地過(guò)濾器)
                add(n1, n2, n3) {
                    return n1 + n2 + n3
                }
            }
        })

注意：當(dāng)全局過(guò)濾器和局部過(guò)濾器重名時(shí)，會(huì)采用局部過(guò)濾器

局部過(guò)濾器優(yōu)先于全局過(guò)濾器被調(diào)用

一個(gè)表達(dá)式可以使用多個(gè)過(guò)濾器。過(guò)濾器之間需要用管道符“|”隔開(kāi)。其執(zhí)行順序從左往右

注意filter方法在vue3中已被廢除

vue3要精簡(jiǎn)代碼，并且filter功能重復(fù)，filter能實(shí)現(xiàn)的功能，methods和計(jì)算屬性基本上也可以實(shí)現(xiàn)。把filter這方面的vue源碼給刪掉，這樣更加方便維護(hù)。

例如

使用computed實(shí)現(xiàn)

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快遞公司:{{ item.deliverCompany }}</li>
      <!-- 使用計(jì)算屬性 -->
      <li>運(yùn)輸狀態(tài):{{ computedText(item.expressState) }}</li>
    </ul>
  </div>
</template>
<script>
export default {
   data() {
    return {
      arr: [
        {
          deliverCompany: "京東快遞",
          expressState: "1",
        },
        {
          deliverCompany: "順豐快遞",
          expressState: "2",
        },
        {
          deliverCompany: "中通快遞",
          expressState: "3",
        },
        {
          deliverCompany: "郵政快遞",
          expressState: "4",
        },
        {
          deliverCompany: "極兔快遞",
          expressState: "5",
        },
        {
          deliverCompany: "某某快遞",
          expressState: null,
        },
      ],
    };
  },
  computed: {
    computedText() {
      // 計(jì)算屬性要return一個(gè)函數(shù)接收參數(shù)
      return function (state) {
        switch (state) {
          case "1":
            return "待發(fā)貨";
            break;
          case "2":
            return "已發(fā)貨";
            break;
          case "3":
            return "運(yùn)輸中";
            break;
          case "4":
            return "派件中";
            break;
          case "5":
            return "已收貨";
            break;
          default:
            return "快遞信息丟失";
            break;
        }
      };
    },
  },
};
</script>

使用methods實(shí)現(xiàn)

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快遞公司:{{ item.deliverCompany }}</li>
      <!-- 使用方法 -->
      <li>運(yùn)輸狀態(tài):{{ methodsText(item.expressState) }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        {
          deliverCompany: "京東快遞",
          expressState: "1",
        },
        {
          deliverCompany: "順豐快遞",
          expressState: "2",
        },
        {
          deliverCompany: "中通快遞",
          expressState: "3",
        },
        {
          deliverCompany: "郵政快遞",
          expressState: "4",
        },
        {
          deliverCompany: "極兔快遞",
          expressState: "5",
        },
        {
          deliverCompany: "某某快遞",
          expressState: null,
        },
      ],
    };
  },
  methods: {
    methodsText(state) {
      switch (state) {
        case "1":
          return "待發(fā)貨";
          break;
        case "2":
          return "已發(fā)貨";
          break;
        case "3":
          return "運(yùn)輸中";
          break;
        case "4":
          return "派件中";
          break;
        case "5":
          return "已收貨";
          break;
        default:
          return "快遞信息丟失";
          break;
      }
    },
  },
};
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: