1024Vue.js

31.Vue v-model 修饰符

2018-09-21  本文已影响56人  圆梦人生

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>
上一篇 下一篇

猜你喜欢

热点阅读