欢迎来到站圈网!

php远程媒体七牛node摇摇

投稿中心

JavaScript

当前位置: 主页 > Web前端 > JavaScript

可能是全网vue v-model最详细讲解教程

时间:2022-11-24|作者:zayyo|点击:

目录

v-model是什么

v-model 是Vue框架的一种内置的API指令,本质是一种语法糖写法。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

为什么使用v-model?

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理;

什么场景下会使用v-model?

表单提交是开发中非常常见的功能,也是和用户交互的重要手段:比如用户在登录、注册时需要提交账号密码;比如用户在检索、创建、更新信息时,需要提交一些数据; 这些都要求我们可以在代码逻辑中获取到用户提交的数据,我们通常会使用v-model指令来完成

示例:v-model的基本使用

可能是全网vue v-model最详细讲解教程

v-model的原理

官方有说到,v-model的原理其实是背后有两个操作:

  • v-bind绑定value属性的值;
  • v-on绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中;

可能是全网vue v-model最详细讲解教程

那v-model是双向绑定吗?

是的你可以用 v-model 指令在表单

article当前的值是:{{ article }}

export default {
  name: 'textarea',
  data () {
    return {
      article: "a"
    }
  }
}

效果:

可能是全网vue v-model最详细讲解教程

v-model绑定checkbox

我们来看一下v-model绑定checkbox:单个勾选框和多个勾选框

  • 单个勾选框:v-model即为布尔值。此时input的value并不影响v-model的值。
  • 多个复选框:当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组。当选中某一个时,就会将input的value添加到数组中。

单选框示例:

可能是全网vue v-model最详细讲解教程

export default {
  name: 'checkbox',
  data () {
    return {
      isAgree: "true"
    }
  }
}

效果:

可能是全网vue v-model最详细讲解教程

  
      篮球
      足球
      羽毛球球
      兵乓球
      您的爱好有:{{ sport }}
export default {
  name: 'demo',
  data () {
    return {
      sport: [],
    }
  }
}

效果示例:

可能是全网vue v-model最详细讲解教程

v-model绑定radio

v-model绑定radio,用于选择其中一项;

        
         您选中的是:{{sex}}
export default {
  name: 'demo',
  data () {
    return {
     sex: '',
    }
  }
}

效果示例:

可能是全网vue v-model最详细讲解教程

v-model绑定select

和checkbox一样,select也分单选和多选两种情况。

  • 单选:只能选中一个值,v-model绑定的是一个值。当我们选中option中的一个时,会将它对应的value赋值到fruit中;
  • 多选:可以选中多个值,v-model绑定的是一个数组。当选中多个值时,就会将选中的option对应的value添加到数组fruit中;
export default {
  name: 'demo',
  data () {
  return {
       fruits2: [],
  }
  }
}

效果示例:

可能是全网vue v-model最详细讲解教程

效果示例:

可能是全网vue v-model最详细讲解教程

v-model的值绑定

目前我们在前面的案例中大部分的值都是在template中固定好的:比如gender的两个输入框值male、female;比如hobbies的三个输入框值basketball、football、tennis. 在真实开发中,我们的数据可能是来自服务器的,那么我们就可以先将值请求下来,绑定到data返回的对象中,再通过v-bind来进行值的绑定,这个过程就是值绑定。这里不再给出具体的做法,因为还是v-bind的使用过程。

v-model修饰符 - lazy

lazy修饰符是什么作用呢?

默认情况下,v-model在进行双向绑定时,绑定的是input事件,那么会在每次内容输入后就将最新的值和绑定的属性进行同步;,如果我们在v-model后跟上lazy修饰符,那么会将绑定的事件切换为 change 事件,只有在提交时(比如回车)才会触发

可能是全网vue v-model最详细讲解教程

      
      
      
      
      
{{ message }}
export default {
  name: 'demo',
  data () {
    return {
       message: "内容",
    }
  }
}

效果示例:

可能是全网vue v-model最详细讲解教程

v-model修饰符 - number

我们先来看一下v-model绑定后的值是什么类型的:message总是string类型,即使在我们设置type为number也是string类型;

可能是全网vue v-model最详细讲解教程

如果我们希望转换为数字类型,那么可以使用 .number修饰符:

可能是全网vue v-model最详细讲解教程

另外,在我们进行逻辑判断时,如果是一个string类型,在可以转化的情况下会进行隐式转换的: 下面的score在进行判断的过程中会进行隐式转化的

可能是全网vue v-model最详细讲解教程

效果示例:

可能是全网vue v-model最详细讲解教程

v-model修饰符 - trim

如果要自动过滤用户输入的守卫空白字符,可以给v-model添加 trim修饰符

可能是全网vue v-model最详细讲解教程

效果示例:

可能是全网vue v-model最详细讲解教程

码上掘金代码片段

全部示例代码:





    
    
    
    Document
    
    





    
{{message}}
您选中的是:{{sex}}
您的选择:{{agree}}
篮球 足球 羽毛球球 兵乓球 您的爱好有:{{sport}}
您选中的水果是{{fruits}}


您选中的水果是{{fruits2}}

您的爱好是{{hobbies}}

{{message}}

{{age}}--{{typeof age}}

{{name}}

总结

到此这篇关于vue v-model最详细讲解的文章就介绍到这了,更多相关v-model详细讲解内容请搜索站圈网以前的文章或继续浏览下面的相关文章希望大家以后多多支持站圈网!

版权声明:本文内容由小编收集网络,均来自网络用户自发贡献,版权归原作者所有,Web前端、电脑编程学习类网站不拥有其著作权,亦不承担相应法律责任。具体规则请查看《Web前端、电脑编程学习类网站用户服务协议》和《Web前端、电脑编程学习类网站知识产权保护指引》。如果您发现本站中有涉嫌抄袭的内容,填写联系本站管理员,一经查实,管理员将立刻删除涉嫌侵权内容。

上一篇:vue3+vite中使用import.meta.glob的操

下一篇:Vue3中echarts无法缩放的问题及解决方案

本文标题:可能是全网vue v-model最详细讲解教程

本文地址:https://www.zhano.cn/JavaScript/67936.html

更多JavaScript

您可能感兴趣的文章

AD300

广告投放 | 联系我们 | 版权申明 | SiteMap

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:15234109 | 邮箱:15234109#qq.com(#换成@)

Copyright © 2019-2022 豫ICP备19001789号