0
点赞
收藏
分享

微信扫一扫

v-model的基本使用,v-model原理;v-model绑定;v-model的值绑定;v-model修饰符

西红柿上校 03-19 21:00 阅读 2

1_v-model的基本使用
表单提交是开发中常见功能,也是和用户交互的重要手段:

比如用户在登录、注册时需要提交账号密码;
比如用户在检索、创建、更新信息时,需要提交一些数据;
这些都要求可以在代码逻辑中获取到用户提交的数据,通常会使用v-model指令来完成:

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定;
它会根据控件类型自动选取正确的方法来更新元素;
尽管如此, v-model 本质上是语法糖,它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理;
比如下面的代码,input利用v-model实现了双向绑定。输入框中的内容,通过数据message会同时显示在h2标签中
 

      

2_v-model的原理

v-model的原理其实是背后有两个操作:

  • v-bind绑定value属性的值;
  • v-on绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中;
  • <input v-model="searchText">
    等价于
    <input :value="searchText" @input="searchText = $event.target.value">
    

    _v-model修饰符
    3_lazy
    默认情况下,v-model在进行双向绑定时,绑定的是input事件,那么会在每次内容输入后就将最新的值和绑定的属性进行同
    步;

    如果在v-model后跟上lazy修饰符,那么会将绑定的事件切换为 change 事件,只有在提交时(比如回车)才会触发;
     

        <!-- 1.lazy: 绑定change事件  -->
        <input type="text" v-model.lazy="message">
        <h2>message: {{message}}</h2>
    

    3_number
    v-model绑定后的值总是string类型,即使在设置type为number也是string类型;

    如果希望转换为数字类型可以使用 .number 修饰符。 另外,在进行逻辑判断时,如果是一个string类型,在可以转化的情况下会进行隐式转换的。 下面的score在进行判断的过程中会进行隐式转化的;
     

        <!-- 2.number: 自动将内容转换成数字 -->
        <input type="text" v-model.number="counter">
        <h2>counter:  {{counter}}-{{typeof counter}}</h2>
    
        <input type="number" v-model="counter2">
        <h2>counter: {{counter2}}-{{typeof counter2}}</h2>
    

                     

举报

相关推荐

0 条评论