研究ノート-vueのフィルター

---

vueでは、二重中括弧{ {}}またはv-bindバインディングを使用して指定された値（固定形式）を出力する場合、フィルターを指定して、必要な形式の値に変換できます。例：日付。

1.コンポーネントでフィルターを使用します。 

<!-- vue中的过滤器 -->
<div>过滤前：{
   
   { date }}</div>
<div>过滤后：{
   
   { date | formatDate }}</div>

data() {
    return {
        date: new Date()
	};
},
filters: {
    formatDate(val) {
        let newDate = ''
		let year = val.getFullYear()
		let month = val.getMonth() + 1
		let day = val.getDate()
		newDate = year + '-' + month + '-' + day
		return newDate
	}
}

2.jsでフィルターを使用します。

Vue.filter('formatDate', function (val) {})

 3.フィルターは直列に接続できます。

filterAは、単一のパラメーターを受け取るフィルター関数として定義され、式メッセージの値はパラメーターとして関数に渡されます。次に、フィルター関数filterBを呼び出し続けます。これも単一のパラメーターを受け取るように定義されており、filterAの結果をfilterBに渡します。

{
   
   { message | filterA | filterB }}

 4.フィルターは複数のパラメーターを受け取ることができます。

filterAは、3つのパラメーターを受け取るフィルター関数として定義されます。メッセージの値が最初のパラメーターとして使用され、通常の文字列「arg1」が2番目のパラメーターとして使用され、式arg2の値が3番目のパラメーターとして使用されます。

{
   
   { message | filterA('arg1', arg2) }}

上記は、vueでのフィルターの基本的な使用法です。フィルタを使用すると、コードの消費を改善できます。

---