vue貨幣過濾器的實現(xiàn)方法

2019-11-19 16:56:37

字體：大中小

來源：轉載

供稿：網(wǎng)友

自定義事件也可以用來創(chuàng)建自定義的表單輸入組件，使用 v-model 來進行數(shù)據(jù)雙向綁定。

所以要讓組件的 v-model 生效，它必須：

接受一個 value 屬性
在有新的 value 時觸發(fā) input 事件

代碼如下：

HTML：

<div id="app"> <p>{{ message }}</p>  <currency-input label="Price" v-model="price"></currency-input> <currency-input label="Shipping" v-model="shipping"></currency-input> <currency-input label="Handling" v-model="handling"></currency-input> <currency-input label="Discount" v-model="discount"></currency-input> <p>Total: ${{ total }}</p></div>

JavaScript：

Vue.component('currency-input', { template: `/ <div>/  <label v-if="label">{{ label }}</label>/   $/   <input/   ref="input"/    v-bind:value="value"/    v-on:input="updateValue($event.target.value)"/    v-on:focus="selectAll"/    v-on:blur="formatValue"/    >/   </div>/ `, props: { value: {  type: Number,   default: 0  },  label: {  type: String,   default: ''  } }, mounted: function () { this.formatValue() }, methods: {  updateValue: function (value) {  var result = currencyValidator.parse(value, this.value)   if (result.warning) {   this.$refs.input.value = result.value   }   this.$emit('input', result.value)  },  formatValue: function () {  this.$refs.input.value = currencyValidator.format(this.value)  },  selectAll: function (event) {  setTimeout(function () {   event.target.select()   }, 0)  } }})new Vue({ el: '#app', data: {  message: 'Hello Vue.js!',  price: 0,  shipping: 0,  handling: 0,  discount: 0 }, computed: { total: function () {  return ((   this.price * 100 +    this.shipping * 100 +    this.handling * 100 -    this.discount * 10   ) / 100).toFixed(2)  } }})

效果圖如下：