过滤器的作用就是给一些文本进行处理,比如说首字母进行大写,人民币转美元等,可以设置全局过滤器和局部过滤器。这里只记录全局过滤器。
main.js中写全局过滤器:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//全局过滤器 首字母变大写
Vue.filter("capitalize",function(val){
if(!val) return ""
val = val.toString()
return val.charAt(0).toUpperCase()+val.slice(1)
} )
// 全局过滤器 人民币转美元
Vue.filter("toDoller", function (val, num) {
//没传入num那就默认给num一个2
// num = num || 2
if (!val) return ""
return num == 2 ? "$" + (val * 0.1567).toFixed(2) : "$" + val * 0.1567
})
new Vue({
render: h => h(App),
}).$mount('#app')
在组件中进行使用:
<template>
<div>
<h3>过滤器</h3>
<p>元数据:{
{ msg }}</p>
<!-- 首字母大写的作用 -->
<p>过滤后的数据:{
{ msg | capitalize }}</p>
<hr>
<p>人民币:{
{ money }}</p>
<p>过滤后成为美元:{
{ money | toDoller }}</p>
<hr>
<!-- 传入参数 -->
<p>保留两位小数的美元:{
{ money | toDoller(2) }}</p>
</div>
</template>
<script>
export default {
data(){
return{
msg:'hello',
money:168
}
}
}
</script>
<style>
</style>
效果:
还有局部过滤器,用到时候可以去参看文档。