美文网首页1024Vue.js
31.Vue v-model 修饰符

31.Vue v-model 修饰符

作者: 圆梦人生 | 来源:发表于2018-09-21 11:11 被阅读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>

相关文章

  • 31.Vue v-model 修饰符

    与 Vue事件修饰符 类似,v-model也有修饰符,用于控制数据同步。 案例

  • vue v-model 知识点

    v-model 修饰符:

  • vue 修饰符

    v-model 修饰符 .lazy.number.trim .sync 修饰符 .native修饰符 事件修饰符 ...

  • 6.3修饰符

    与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机 .lazy 在输入框中,在v-model后面...

  • vue 修饰符详情总结

    一:表单修饰符(v-model) number 修饰符 number修饰符作用是尝试将输入的内容转化为Number...

  • 【Vue表单】v-model的修饰符

    在使用v-model绑定单行文本框时,还能用以下修饰符来实现某些需求 v-model的常用修饰符有以下几种 laz...

  • vue和jquery 混用vue没绑定数据

    v-model 有 lazy 修饰符的话,则通过如下调用:

  • Vue.js 修饰符

    与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机 .lazy: 这时 message 并不是实...

  • vue表单

    大纲 1、v-model2、使用实例3、值绑定4、修饰符 1、v-model 你可以用 v-model 指令在表单...

  • vue中v-model

    v-model在 等中使用 修饰符.lazy(取代 input 监听 change 事件).number(...

网友评论

    本文标题:31.Vue v-model 修饰符

    本文链接:https://www.haomeiwen.com/subject/yzranftx.html