技術標籤：學習筆記vueelement前端javascriptvue.js

一般在vue專案中，使用filter過濾器，有全域性和區域性兩種使用方式

區域性使用
實現一個效果，將實時輸入的英文首字母變成大寫，如果有空格，就空格後第一個首字母大寫

// index.vue
<template>
	<el-input v-model="input" placeholder="請輸入內容,如果連續輸入，請以空格隔開" style="width: 300px"></el-input>
    <span>
 
{{ input | capitalize }}</span>
</template>

export defalut {
	data () {
		return {
			input: ''
		}	
	},
	filters: {
		capitalize (value) {
			console.log(value) //實時輸入的值 
			if(value){
                let str = value.toString()
                //獲取英文，以空格分組把字串轉為陣列，遍歷每一項，第一項轉為大寫字母
                let
 
 newArr = str.split(" ").map(ele=>{
                   return ele.charAt(0).toUpperCase() + ele.slice(1)
                })
                return newArr.join(" ")  //陣列轉字串 以空格輸出。。。
            }
		}
	}
}

這樣子就實現了實時輸入，然後修改首字母的效果了

但是問題來了，假如我有二十個頁面，每個頁面都有三個輸入框，一個要實現輸入修改首字母，一個要實現輸入自動加上年月日，一個要實現輸入價格自動在前面加上￥

這個時候就不能全複製貼上了，這樣肯定會被砍死，所以，我們需要全域性的filter

// filter.js
// 新建一個filter.js檔案，把所有的過濾器都寫在裡面

/*
*首字母大寫
*/
let capitalize = function (val , ...params) {
	if(val){
        let str = value.toString()
        //獲取英文，以空格分組把字串轉為陣列，遍歷每一項，第一項轉為大寫字母
        let newArr = str.split(" ").map(ele=>{
           return ele.charAt(0).toUpperCase() + ele.slice(1)
        })
        return newArr.join(" ")  //陣列轉字串 以空格輸出。。。
    }
}

/*
*自動新增年月日
*/
let addDate = function (val , ...params) {
	if (val) {
		return '2020年12月7日' + val
	}
}

/*
*自動新增貨幣符號
*/
let filter_price = function (val, ...params) {
	if (val) {
		return '￥' + val
	}
}

// 統一匯出

export {
	capitalize,
	addDate,
	filter_price
}

下邊在main.js中 匯入 上邊 filter.js檔案 ，當然你也可以在任何元件中匯入 filter.js這個檔案，但是對於全域性過濾器來說，最好是在main.js中定義，規範些，匯入的是一個物件，所以使用Object.keys()方法，得到一個由key組成的陣列，遍歷資料，讓key作為全域性過濾器的名字，後邊的是key對應的處理函式，這樣在任何一個元件中都可以使用全域性過濾器了

// main.js

import * as _filter from './filters/filter'

Object.keys(_filter).forEach(item=>{
  Vue.filter(item,_filter[item])
})
 
new Vue({
  router,store,
  render: h => h(App),
}).$mount('#app')

// 頁面中使用定義的filter
<template>
    <div>
      <h1>{{ price | filter_price}}</h1>
    </div>
</template>
 
<script>
export default {
    name:'news',
    data(){
        return{
            price:1200
        }
    }  
}
</script>