Vue-cli项目中过滤器的基本使用
一、全局注册过滤器
- 创建文件filters/index.js(输出定义的过滤函数)
export function getMoney(value){
return `¥${value}`
}
export function getNumber(value){
return `${value.toFixed(2)}`
}
- 在main.js全局引用filter/index.js
import * as filters from './filter'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
- 在要使用的页面中引入过滤的方法
<template>
<div class="tab">
<h4>222</h4>
<p>{{num | getNumber | getMoney}}</p>
</div>
</template>
<script>
export default {
name: "tab",
data(){
return {
num: 666.52132
}
},
}
</script>
注意:
1.引入顺序不同可能会导致的问题
2.模板字符串结合方法的使用
二、局部使用过滤器
- 在需要使用的页面中注册过滤函数
filters:{
upper:function(value){
return value.toFixed(1)
},
},
- 在需要的地方使用注册的函数
<p>{{money | upper}}</p>
管道(|)符号对它们进行串连,并通过一系列过滤器转换一个值
注册过滤函数可以传多个参数进行灵活赋值
<p>{{money | getNumber(4) | getMoney}}</p>
export function getNumber(value,limit){ return
${value.toFixed(limit)}}