31.Vue v-model 修飾符

Vue事件修飾符 類似,v-model也有修飾符,用於控制數據同步。

1、.lazy  // v-model默認是在input事件中同步輸入框的數據,可以使用修飾符.lazy會轉變成change事件同步
2、.number // 講輸入的轉換爲Number類型,否則輸入的是數字但它的類型還是String
3、.trim // 自動過濾輸入的首位空格

案例

<template>
  <div>
      <input type="text" v-model.lazy="inputtxt1"/> <br/>
      輸入的是:{{inputtxt1}} <br/><br/>
      
      <input type="text" v-model.number="inputtxt2" /> <br/>
      輸入的是:{{inputtxt2}} <br/><br/>

      <input type="text" v-model.trim="inputtxt3"/> <br/>
      輸入的是:{{inputtxt3}} <br/><br/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      inputtxt1: undefined,
      inputtxt2: undefined,
      inputtxt3: undefined
    }
  }
}
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章