vue-cli 3中怎么實現(xiàn)一個全局過濾器,相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
創(chuàng)新互聯(lián)自2013年起,先為什邡等服務(wù)建站,什邡等地企業(yè),進行企業(yè)商務(wù)咨詢服務(wù)。為什邡企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
1、創(chuàng)建 filters.js
首先新建一個filters.js文件。把這個文件放在 src/assets 里。
因為這里是用來存放靜態(tài)資源的。這個文件夾可以用來存放圖片、css和部分自定義的功能的js資源。如果需要更好的分類,可以在 assets 文件夾里再創(chuàng)建 js 、 css 、 img 等文件夾。
2、創(chuàng)建過濾器規(guī)則
這里我創(chuàng)建了3個過濾器
// 轉(zhuǎn)小寫 let lower = value => value.toLowerCase(); // 轉(zhuǎn)大寫 let upper = value => value.toUpperCase(); let currencyStyle = (value, style) => { // 貨幣格式 /** * style: * currency:貨幣 * number: 數(shù)字格式 */ if(style == 'number') { // 數(shù)字格式 return parseFloat(value.replace(/[^\d\.-]/g, "")); } else { // 貨幣格式, 并保留2位小數(shù) var n = 2; value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; var l = value.split(".")[0].split("").reverse(), r = value.split(".")[1]; var t = ""; for (var i = 0; i < l.length; i++) { t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : ""); } return t.split("").reverse().join("") + "." + r; } } export { lower, upper, currencyStyle }
3、在main.js里注冊全局過濾器
import Vue from 'vue' import App from './App.vue' import * as filters from './assets/filters' Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
通過 forEach 循環(huán),把自定義功能分別注冊到過濾器里。
4、在組件里使用
<template> <div id="app"> <p>{{ num1 | currencyStyle('currency') }}</p> <p>{{ num2 | currencyStyle('number') }}</p> <p>{{ msg1 | lower }}</p> <p>{{ msg2 | upper }}</p> </div> </template> <script> export default { name: 'app', data() { return { num1: 123456, num2: '123,456', msg1: 'ABC', msg2: 'def' } } } </script>
看完上述內(nèi)容,你們掌握vue-cli 3中怎么實現(xiàn)一個全局過濾器的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
新聞名稱:vue-cli3中怎么實現(xiàn)一個全局過濾器
文章路徑:http://muchs.cn/article14/johide.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、域名注冊、網(wǎng)站策劃、網(wǎng)站收錄、網(wǎng)站排名、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)