str tid slice 價格 取代 四舍五入 tof ssa value

1.使用地方： 雙花括號插值處或 組件屬性處 例： {{ message | capitalize }} <div v-bind:id="rawId | formatId"></div> 2.分為兩種定義方式： （1）全局定義 Vue.filter(‘capitalize‘, function (value) { if (!value) return ‘‘ value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) new Vue({ // ... }) 例2：過濾性別。0返回男，1返回女 <div>{{source|gender}}</div> Vue.filter(‘gender‘, function (value) { //value是要準備過濾的原值 return value === 0 ? ‘男‘ : ‘女‘ }) const vm = new Vue({ el:"#root", data:{ source:0 } }) （2）局部定義 filters: { capitalize: function (value) { if (!value) return ‘‘ value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } 例2： const vm = new Vue({ el:"#root", data:{ source:0 }， filter：{ gender(value){ return value === 0 ? ‘男‘ : ‘女‘ } } }) <div>{{source|gender|surfix}}</div> 例3：連續過濾 過濾完性別之後，再在結果上加“人” const vm = new Vue({ el:"#root", data:{ source:0 }， filter：{ gender(value){ return value === 0 ? ‘男‘ : ‘女‘ }， surfix (value) { return value + ‘人‘ }, } }) <div>{{source|gender}}</div> 例4：購物車裏價格返回兩位小數 const vm = new Vue({ el:"#root", data:{ source:0， price：123.4567 }， fixed (value) { return value.toFixed(2) //toFixed把 Number 四舍五入為指定小數位數的數字。 } }, }) <div>{{price|fixed}}</div> //123.45 例5：傳參 const vm = new Vue({ el:"#root", data:{ source:0， price：123.4567 }， fixed (value，segment) { return value.toFixed(segment) //toFixed把 Number 四舍五入為指定小數位數的數字。 } }, }) <div>{{price|fixed（segment）}}</div> //123.45 3.可以對一個值進行連續過濾 {{ message | filterA(‘arg1‘, arg2) }} 4.可以傳多個參數 {{ message | filterA(‘arg1‘, arg2) }} 這裏 message 的值作為第一個參數，普通字符串 ‘arg1‘ 作為第二個參數，表達式 arg2 的值作為第三個參數。 *計算屬性完全可以取代過濾器，但有時使用過濾器比較方便。

vue的過濾器語發及應用案例