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])
})

效果还是和上面的一样。