欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年04月01日 14:21:19   作者：CURRY_zhao  
這篇文章主要為大家詳細(xì)介紹了vue貨幣過濾器的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

自定義事件也可以用來創(chuàng)建自定義的表單輸入組件，使用 v-model 來進(jìn)行數(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)
  }
 }
})

效果圖如下：

每個 Vue 實例都實現(xiàn)了事件接口(Events interface)，即：

使用 $on(eventName) 監(jiān)聽事件
使用 $emit(eventName) 觸發(fā)事件

v-model實現(xiàn)雙向傳遞。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論