vue.js之filters的使用（過濾器）

vue.js之filters的使用（過濾器）

**過濾器：**對我們渲染出來的數據進行進一步的格式化處理。 例如：後臺返回的數據性別是0和1 ，渲染頁面的時候，我們應該轉換成“男”或者“女”，
在這種情況下呢，我們就需要用到了過濾器，還有一點就是商品價格的讀取出來的是普通的數值，比如：258964，我們需要在前面添加一個貨幣符號或者是千分分隔符，變爲：￥250，都需要用到了過濾器。

過濾器分爲兩種：全局過濾器，局部過濾器

全局過濾器使用：

<template>
  <div class="home">
  <div v-for="(item,index) in this.list" :key="index">
    名字：  {{item.name }}
     性別： {{item.sex}}
     //我們在頁面中直接用|符號 ，寫上我們剛纔設置的那個自定義指令名字  括號裏面是用來分隔的
   價格：   {{item.price|currentIndex('$')}}
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  data: function() {
    return {
      list: [
        { name: "jakc", price: 289456123, sex: 0 },
        { name: "nnnn", price: 2566745643, sex: 1 },

        { name: "jaaaaakc", price: 831143578, sex: 0 },

     { name: "jakaaaac", price: 456127783, sex: 1 }
      ]
    };
  }
};
</script>

main.js中：全局的註冊

//   貨幣格式
Vue.filter('currentIndex', function (v,type) {
//一步操作是用來實現千分分隔符的  實現原理就是用正則來實現的
 var result =  v && v.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g,'$1,')

  // 第一個參數就是我們傳遞 過來的值
  // 第二個是拼接 設計的一個類型 

  return type+result;
})

效果圖：

//支付狀態管理
//支付狀態
Vue.filter('payMoney', function (v) {
  console.log(v)
  switch (v) {
    case 0:
      return "支付過了"
      break;

    case 1:
      return "沒有支付"
      break;
    default:
      return '未知的'
      break;
  }
  return payMoney
})

效果：

二：簡單的小封裝

如果我們使用過濾器的次數較多，我們可以考慮做一些封裝函數的處理。
filters裏面創建一個index.js

//千分分隔符
export function currentIndex(v) {

//一步操作是用來實現千分分隔符的  實現原理就是用正則來實現的
 var result =  v && v.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g,'$1,')

  // 第一個參數就是我們傳遞 過來的值
  // 第二個是拼接 設計的一個類型 

  return type+result;
})

}
//支付管理
export function payMoney(v) {
  switch (v) {
    case 0:
      return "支付過了"
      break;

    case 1:
      return "沒有支付"
      break;
    default:
      return '未知的'
      break;
  }
  console.log(payMoney)
  return payMoney

}

main.js 裏面引入：

// 引入過濾器函數  *作爲所有的函數
import * as filters  from './filters/index.js';
// key就是提取屬性名 值就是這個函數
Object.keys(filters).forEach(key=>{
  Vue.filter(key,filters[key])
})

效果還是和上面的一樣。