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])
})
效果还是和上面的一样。