Vue過濾器的使用詳解(代碼實現)

過濾器的功能是對要顯示的數據進行格式化後再顯示，其並沒有改變原本的數據，只是產生新的對應的數據

 過濾器，其實不是必須要用的東西，它只是vue給我們提供的新的數據處理方式，過濾器能做到的，用計算屬性，methods方法，依然可以實現

案例1：（過濾器簡單使用）

<template>
        <h3>{{str | strChange}}</h3>
</template>
<script>
export default {
  data (){
    return {
      str:'hello world'
    };
  },
  filters:{
    // toUpperCase()方法將英文字母轉換爲大寫
    strChange(value) {
      console.log('value值',value)
       return value.toUpperCase()
    }
  }
}
</script>

上圖中 A爲參數（要被處理的數據）B爲過濾器，中間通過管道符（‘ | ’）連接 ，管道符兩邊有空格分離（‘我覺得就是一個規範，因爲去掉兩邊的空格，依然可以運行’）

過濾器其實也是按照函數來寫的，過濾器寫在filters下，與data ，methods等同一級。如圖B就是過濾器，定義在filters內,圖中A作爲參數傳遞給B，然後B return出一個結果，將整個C替換掉。注意，strChange中的value爲參數A 並不是從data中直接拿到的。

效果1：

案例2：（過濾器帶參數）

<template>
        <h3>{{str | strChange('加油 China !')}}</h3>
</template>
<script>
export default {
  data (){
    return {str:'hello world'};
  },
  filters:{
    strChange(value,res) {
      console.log('value值:',value,'res值:',res)
       return value+' ! '+res
    }
  }
}
</script>

     '加油 China !' 爲參數，但是在過濾器中，第一個參數永遠是管道符前邊的這個參數（‘要被處理的數據’）

效果2：

案例3：（串聯）

<template>
        <h3>{{ message | filterA | filterB }}</h3>
</template>
<script>
export default {
  data (){
    return {message:'hello world'};
  },
  filters:{
    filterA(value){
      return value.slice(0,5)
    },
    filterB(value){
      return value+'，'+'天命愛心職責！'
    }
  }
}
</script>

過濾器串聯是按順序來進行編譯的，A作爲參數給filterA，return出結果替換掉B，B作爲參數給filterB，return出結果替換掉C。

效果3：

案例4：（局部/全局過濾器） 

1.新建filter文件夾，添加filter.js文件：

2.添加到Vue全局中，在main.js中引入,並且添加：

3.在組件中就可以直接使用了：

<template>
    <div>
        <h3>{{ message | myfilter}}</h3>
        輸入：<input type="text" v-bind:value='message | myfilter'>
    </div>
</template>
 
<script>
export default {
  data (){
    return {message:'hello world'};
  },
}
</script>

過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。 

 效果4：

 案例5：(簡單應用)

通過一個 Day.js 這個輕量的處理時間和日期的 JavaScript 庫，來快速掌握過濾器的使用。

Node.js 項目中使用 Day.js，使用 NPM 安裝：

https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.js

  我是要在 Node.js 項目中使用 Day.js，使用 NPM 安裝：

 npm install dayjs

然後在項目代碼中引入即可：

var dayjs = require('dayjs')

//import dayjs from 'dayjs' // ES 2015

dayjs().format()

<template>
    <div>
      <h3>顯示格式化後的時間:</h3>
			<!-- 計算屬性實現 -->
			<h4>計算屬性：{{nowTime}}</h4>
			<!-- methods實現 -->
			<h4>methods實現：{{getNowTime()}}</h4>
			<!-- 過濾器實現 -->
			<h4>過濾器：{{time | timeFormater}}</h4>
			<!-- 過濾器實現（傳參） -->
			<h4>過濾器（傳參）：{{time | timeFormater('YYYY-MM-DD')}}</h4>
    </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  data (){
    return {
      time:1648106069711//時間戳
    };
  },
  computed: {
				nowTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
	methods: {
				getNowTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部過濾器
	filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('value值',value)？
					return dayjs(value).format(str)
				},
			}
}
</script>

str參數這種寫法是es6中的寫法 ，即沒有傳這個參數時，默認是等號後邊規定的值，有參數，就按照所傳參數的值來操作。

效果5：