美文网首页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 修饰符

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