vue过滤器的作用与学习方法

浜屻€佸寮烘暟鎹睍绀?/h2>

Vue杩囨护鍣ㄥ彲浠ョ敤浜庡寮烘暟鎹睍绀猴紝涓虹敤鎴锋彁渚涙洿鐩磋鐨勪俊鎭€傞€氳繃杩囨护鍣紝鍙互杞绘澗鍦板皢鏁版嵁杞崲涓哄浘琛ㄣ€佸浘鏍囨垨鍏朵粬瑙嗚鏁堟灉銆?/p>

澧炲己鏁版嵁灞曠ず鐨勭ず渚嬪寘鎷細

1. 鐘舵€佽浆鎹?/strong>
   鏍规嵁鏁版嵁鐘舵€佹樉绀轰笉鍚岀殑鍥炬爣鎴栭鑹层€?/p>

   Vue.filter('statusIcon', function(value) {
   
     if (value === 'active') return '馃煝'
     if (value === 'inactive') return '馃敶'
     return '鈿笍'
   })
   

2. 鍗曚綅杞崲
   灏嗘暟瀛楄浆鎹负甯︽湁閫傚綋鍗曚綅鐨勬牸寮忋€?/p>

   Vue.filter('fileSize', function(value) {
   
     if (value < 1024) return value + ' B'
     else if (value < 1048576) return (value / 1024).toFixed(2) + ' KB'
     else return (value / 1048576).toFixed(2) + ' MB'
   })
   

3. 鐧惧垎姣旇浆鎹?/strong>
   灏嗗皬鏁拌浆鎹负鐧惧垎姣旀牸寮忋€?/p>

   Vue.filter('percentage', function(value) {
   
     if (!value) return '0%'
     return (value * 100).toFixed(2) + '%'
   })
   

涓夈€佺畝鍖栨ā鏉块€昏緫

閫氳繃浣跨敤杩囨护鍣紝鍙互澶уぇ绠€鍖栨ā鏉夸腑鐨勯€昏緫浠ｇ爜锛屼娇妯℃澘鏇村姞绠€娲佸拰鏄撹銆傝繃婊ゅ櫒鍙互灏嗗鏉傜殑閫昏緫灏佽璧锋潵锛屼娇妯℃澘浠ｇ爜鏇村姞娓呮櫚銆?/p>

绠€鍖栨ā鏉块€昏緫鐨勭ず渚嬪寘鎷細

1. 鏉′欢鏍煎紡鍖?/strong>
   灏嗘潯浠舵牸寮忓寲閫昏緫灏佽鍦ㄨ繃婊ゅ櫒涓€?/p>

   Vue.filter('isAdmin', function(value) {
   
     return value ? 'Administrator' : 'User'
   })
   

2. 鏁板€煎鐞?/strong>
   灏嗘暟鍊煎鐞嗛€昏緫灏佽鍦ㄨ繃婊ゅ櫒涓€?/p>

   Vue.filter('round', function(value) {
   
     if (!value) return 0
     return Math.round(value)
   })
   

3. 鏂囨湰鎴柇
   灏嗘枃鏈埅鏂€昏緫灏佽鍦ㄨ繃婊ゅ櫒涓€?/p>

   Vue.filter('truncate', function(value, length) {
   
     if (!value) return ''
     if (value.length <= length) return value
     return value.substring(0, length) + '...'
   })
   

鍥涖€佽繃婊ゅ櫒鐨勪娇鐢ㄦ柟娉?/h2>

鍦╒ue.js搴旂敤绋嬪簭涓紝浣跨敤杩囨护鍣ㄩ潪甯哥畝鍗曘€傚彲浠ョ洿鎺ュ湪妯℃澘涓娇鐢ㄨ繃婊ゅ櫒锛屾垨鍦↗avaScript浠ｇ爜涓皟鐢ㄨ繃婊ゅ櫒銆?/p>

鍦ㄦā鏉夸腑浣跨敤杩囨护鍣細

<p>{{ message | capitalize }}</p>

<p>{{ price | currency }}</p>
<p>{{ date | dateFormat }}</p>

鍦↗avaScript浠ｇ爜涓娇鐢ㄨ繃婊ゅ櫒锛?/strong>

export default {

  computed: {
    formattedDate() {
      return this.$options.filters.dateFormat(this.date)
    },
    formattedPrice() {
      return this.$options.filters.currency(this.price)
    }
  }
}

浜斻€佸叏灞€杩囨护鍣ㄤ笌灞€閮ㄨ繃婊ゅ櫒

Vue杩囨护鍣ㄥ彲浠ユ槸鍏ㄥ眬鐨勶紝涔熷彲浠ユ槸灞€閮ㄧ殑銆傚叏灞€杩囨护鍣ㄥ彲浠ュ湪鏁翠釜Vue瀹炰緥涓娇鐢紝鑰屽眬閮ㄨ繃婊ゅ櫒浠呭湪鐗瑰畾缁勪欢涓彲鐢ㄣ€?/p>

瀹氫箟鍏ㄥ眬杩囨护鍣細

Vue.filter('reverse', function(value) {

  if (!value) return ''
  return value.split('').reverse().join('')
})

瀹氫箟灞€閮ㄨ繃婊ゅ櫒锛?/strong>

export default {

  filters: {
    reverse(value) {
      if (!value) return ''
      return value.split('').reverse().join('')
    }
  }
}

鍏€佷娇鐢ㄧ涓夋柟搴撳垱寤鸿繃婊ゅ櫒

鍦╒ue.js涓紝鍙互浣跨敤绗笁鏂瑰簱鍒涘缓杩囨护鍣紝浠ヤ究鏇磋交鏉惧湴澶勭悊澶嶆潅鐨勬暟鎹浆鎹㈤渶姹傘€備緥濡傦紝鍙互浣跨敤moment.js鏉ュ鐞嗘棩鏈熸牸寮忓寲銆?/p>

浣跨敤moment.js鍒涘缓鏃ユ湡鏍煎紡鍖栬繃婊ゅ櫒锛?/strong>

import moment from 'moment'

Vue.filter('formatDate', function(value, format) {
  if (!value) return ''
  return moment(value).format(format)
})

鍦ㄦā鏉夸腑浣跨敤moment.js杩囨护鍣細

<p>{{ date | formatDate('YYYY-MM-DD') }}</p>

涓冦€佹€荤粨涓庡缓璁?/h2>

Vue杩囨护鍣ㄦ槸涓€涓己澶т笖鐏垫椿鐨勫伐鍏凤紝鍙互甯姪寮€鍙戣€呰交鏉惧湴鏍煎紡鍖栧拰澶勭悊鏁版嵁锛屼娇妯℃澘浠ｇ爜鏇村姞绠€娲佸拰鏄撹銆傞€氳繃浣跨敤杩囨护鍣紝鍙互鏄捐憲鎻愰珮浠ｇ爜鐨勫彲缁存姢鎬у拰鍙鎬с€備互涓嬫槸涓€浜涘缓璁細

1. 鍏呭垎鍒╃敤鍏ㄥ眬杩囨护鍣?/strong>
   濡傛灉鏌愪釜杩囨护鍣ㄥ湪澶氫釜缁勪欢涓娇鐢紝寤鸿灏嗗叾瀹氫箟涓哄叏灞€杩囨护鍣紝浠ュ噺灏戦噸澶嶄唬鐮併€?/p>

2. 淇濇寔杩囨护鍣ㄧ畝鍗?/strong>
   杩囨护鍣ㄧ殑閫昏緫搴斿敖閲忕畝鍗曪紝浠ヤ究浜庣悊瑙ｅ拰缁存姢銆傚鏉傜殑閫昏緫鍙互鑰冭檻鏀惧湪璁＄畻灞炴€ф垨鏂规硶涓€?/p>

3. 缁勫悎浣跨敤杩囨护鍣?/strong>
   鍙互灏嗗涓繃婊ゅ櫒缁勫悎浣跨敤锛屼互瀹炵幇澶嶆潅鐨勬暟鎹浆鎹㈤渶姹傘€?/p>

閫氳繃鍚堢悊浣跨敤Vue杩囨护鍣紝鍙互澶у箙鎻愬崌Vue.js搴旂敤绋嬪簭鐨勫紑鍙戞晥鐜囧拰鐢ㄦ埛浣撻獙銆?/p>

鏇村闂瓟FAQs锛?/strong>

浠€涔堟槸Vue杩囨护鍣紵

Vue杩囨护鍣ㄦ槸涓€绉嶇敤浜庢牸寮忓寲銆佸鐞嗗拰杞崲鏁版嵁鐨勫姛鑳姐€傚畠鍙互鍦ㄦā鏉夸腑瀵规暟鎹繘琛屽鐞嗭紝浠ヤ究鍦ㄦ覆鏌撴椂鍛堢幇鍑烘墍闇€鐨勬牸寮忋€傞€氳繃浣跨敤杩囨护鍣紝鎴戜滑鍙互杞绘澗鍦板鏁版嵁杩涜鎿嶄綔鍜岃浆鎹紝鑰屾棤闇€鍦ㄧ粍浠朵腑缂栧啓澶ч噺鐨勯€昏緫浠ｇ爜銆?/p>

濡備綍浣跨敤Vue杩囨护鍣紵

浣跨敤Vue杩囨护鍣ㄩ潪甯哥畝鍗曘€傛垜浠渶瑕佸湪Vue瀹炰緥涓畾涔夎繃婊ゅ櫒銆傚彲浠ラ€氳繃Vue.filter()鏂规硶鏉ュ畾涔変竴涓叏灞€杩囨护鍣紝鎴栬€呭湪缁勪欢鍐呴儴浣跨敤filters閫夐」鏉ュ畾涔変竴涓眬閮ㄨ繃婊ゅ櫒銆傜劧鍚庯紝鍦ㄦā鏉夸腑浣跨敤绠￠亾绗︼紙|锛夊皢闇€瑕佽繃婊ょ殑鏁版嵁涓庤繃婊ゅ櫒鍚嶇О杩炴帴璧锋潵銆?/p>

渚嬪锛屾垜浠彲浠ュ畾涔変竴涓悕涓?quot;uppercase"鐨勮繃婊ゅ櫒鏉ュ皢鏂囨湰杞崲涓哄ぇ鍐欙細

Vue.filter('uppercase', function(value) {
  return value.toUpperCase();
})

鐒跺悗锛屽湪妯℃澘涓娇鐢ㄨ繃婊ゅ櫒锛?/p>

<p>{{ message | uppercase }}</p>

Vue杩囨护鍣ㄧ殑甯歌鐢ㄩ€旀湁鍝簺锛?/strong>

1. 鏂囨湰鏍煎紡鍖?/strong>锛歏ue杩囨护鍣ㄥ彲浠ョ敤浜庡鏂囨湰杩涜鏍煎紡鍖栵紝渚嬪灏嗘枃鏈浆鎹负澶у啓鎴栧皬鍐欍€佹坊鍔犺揣甯佺鍙枫€佹棩鏈熸牸寮忓寲绛夈€?/p>

2. 鏁版嵁澶勭悊锛氳繃婊ゅ櫒鍙互鐢ㄤ簬澶勭悊鏁版嵁锛屼緥濡傚鏁扮粍杩涜鎺掑簭銆佺瓫閫夈€佸幓閲嶇瓑鎿嶄綔锛屾垨瀵规暟瀛楄繘琛屾牸寮忓寲銆佸洓鑸嶄簲鍏ャ€佷繚鐣欏皬鏁扮瓑銆?/p>

3. 鍥剧墖澶勭悊锛氳繃婊ゅ櫒鍙互鐢ㄤ簬澶勭悊鍥剧墖锛屼緥濡傝鍓€佽皟鏁村ぇ灏忋€佹坊鍔犳护闀滅瓑銆?/p>

4. URL澶勭悊锛氳繃婊ゅ櫒鍙互鐢ㄤ簬澶勭悊URL锛屼緥濡傚URL杩涜缂栫爜銆佽В鐮併€佹嫾鎺ョ瓑銆?/p>

5. 鏁版嵁杩囨护锛氳繃婊ゅ櫒鍙互鐢ㄤ簬瀵规暟鎹繘琛岃繃婊わ紝渚嬪鏍规嵁鏉′欢绛涢€夊嚭闇€瑕佺殑鏁版嵁銆?/p>

Vue杩囨护鍣ㄦ彁渚涗簡涓€绉嶇畝鍗曡€岀伒娲荤殑鏂瑰紡鏉ュ鏁版嵁杩涜澶勭悊鍜岃浆鎹紝浣挎垜浠兘澶熸洿濂藉湴鎺у埗鍜屽睍绀烘暟鎹€傛棤璁烘槸瀵规枃鏈€佹暟瀛椼€佸浘鐗囪繕鏄疷RL杩涜澶勭悊锛岃繃婊ゅ櫒閮借兘鎻愪緵渚垮埄鐨勫姛鑳斤紝浣挎垜浠殑搴旂敤鏇村姞寮哄ぇ鍜屾槗浜庣淮鎶ゃ€?/p>