首頁 > web前端 > js教程 > 主體

Vue.js自訂事件如何進行表單輸入元件

php中世界最好的语言
發布: 2018-03-28 17:38:55
原創
1919 人瀏覽過

這次帶給大家Vue.js自訂事件如何進行表單輸入元件,Vue.js自訂事件進行表單輸入元件的注意事項有哪些,以下就是實戰案例,一起來看一下。

Vue.js使用自訂事件的表單輸入元件

自訂事件可以用來建立自訂的表單輸入元件,使用v-model 來進行數據雙向綁定。要牢記:

<input v-model="something">
登入後複製

這不過是以下範例的語法糖:

<input
 v-bind:value="something"
 v-on:input="something = $event.target.value">
登入後複製

所以在元件中使用時,它相當於下面的簡寫:

<custom-input
 v-bind:value="something"
 v-on:input="something = arguments[0]">
</custom-input>
登入後複製

所以要讓元件的v-model 生效,它應該(從2.2.0 起是可配置的):

接受一個value prop

#在有新的值時觸發input 事件並將新值作為參數

我們來看一個非常簡單的貨幣輸入的自訂控制項:--在父元件中引用子元件模板時用綁定v-model資料:

<currency-input v-model="price"></currency-input>
登入後複製
Vue.component('currency-input', {
 template: '\
  <span>\
   $\
   <input\
    ref="input"\
    v-bind:value="value"\
    v-on:input="updateValue($event.target.value)"\
   >\
  </span>\
 ',
 props: ['value'],
 methods: {
  // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
  updateValue: function (value) {
   var formattedValue = value
    // 删除两侧的空格符
    .trim()
    // 保留 2 位小数
    .slice(
     0,
     value.indexOf('.') === -1
      ? value.length
      : value.indexOf('.') + 3
    )
   // 如果值尚不合规,则手动覆盖为合规的值
   if (formattedValue !== value) {
    this.$refs.input.value = formattedValue
   }
   // 通过 input 事件带出数值
   this.$emit('input', Number(formattedValue))
  }
 }
})
登入後複製

定義元件 v-model

2.2.0 新增

#預設情況下,一個元件的v-model 會使用value prop 和input 事件。但是諸如單選框、複選框之類的輸入類型可能把 value 用作了別的目的。 model 選項可以避免這樣的衝突:

Vue.component('my-checkbox', {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: Boolean,
  // 这样就允许拿 `value` 这个 prop 做其它事了
  value: String
 },
 // ...
})
登入後複製
<my-checkbox v-model="foo" value="some value"></my-checkbox>
登入後複製

上述程式碼等價於:

<my-checkbox
 :checked="foo"
 @change="val => { foo = val }"
 value="some value">
</my-checkbox>
登入後複製

注意你還是需要明確宣告 checked 這個 prop。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

在vue裡如何使用xe-utils

vue-router進行build時不顯示路由頁面怎麼處理

以上是Vue.js自訂事件如何進行表單輸入元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!