1. 程式人生 > >vue的過濾器語發及應用案例

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

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的過濾器語發及應用案例