从“心”认识Vue（三）：再谈v-model

最新推荐文章于 2024-04-29 05:03:03 发布
最新推荐文章于 2024-04-29 05:03:03 发布
阅读量270 收藏 1
点赞数
分类专栏： vue 文章标签： vue es6 vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/high32/article/details/112980137
版权
本文详细探讨了Vue中的v-model特性，包括它如何实现双向数据绑定，以及在text输入框、radio单选框、checkbox多选框和select下拉菜单中的应用。还介绍了v-model的值绑定和修饰符，如lazy、number和trim，帮助读者更深入理解Vue的数据绑定机制。
摘要由CSDN通过智能技术生成

从“心”认识Vue（三）：再谈v-model

前言

开始学习vue了，但是编程的思想还是不容易转变过来，一两周过去了，只知道个大概，知其然而不知其所以然，打算开一个系列帖，重新认识下vue。

一、v-model的基本使用

vue中使用v-model实现表单元素和数据的双向绑定。

1.v-model绑定text输入框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="msg">
  <h3>{{msg}}</h3>
</div>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      msg: "haha"
    }
  })
</script>
</body>
</html>

2.v-model绑定原理

仔细看上面代码，看v-model都做了什么？

  • 第一步，使用v-bind绑定了值；
  • 第二步，使用了一个input事件实现值的同步输入

那么我们可以理解为这样：先用v-bind绑定value值，然后用通过v-on使用input事件,event.target.value为事件源的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

 <input type="text" :value="msg" @input="valChange">

  <h3>{{msg}}</h3>
</div>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      msg: "haha"
    },
    methods:{
      valChange(event){
        this.msg = event.target.value
      }
    }
  })
</script>
</body>
</html>

进而，input可以写成这样，事件方法就不用写了：

<input type="text" :value="msg" @input="msg=$event.target.value">

也就是上面代码等同于下面代码：

<input type="text" v-model="msg">

二、v-model与radio

  • v-model直接与单选框value值进行绑定
  • 定义了value值时，radio也会同时选中,基于双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <label for="male">
<!--      用v-model时name值不写时它们也是互斥的-->
      <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>你选择的是：{{sex}}</h2>
    </div>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          //sex默认是男，同时input也会被选中，基于双向绑定
          sex:"男"
        }
      })
    </script>
</body>
</html>

三、v-model与checkbox

1.单选框

  • v-model与checked是否选中绑定，绑定boolean值
  • 此时value与v-model无关
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>你选择的是：{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          isAgree:false,//单选框
        }
      })
    </script>
</body>
</html>

2.多选框

  • 多选时，v-model绑定的是一个数组
  • 当被选中时，value值就会加入数组中
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">

<!--  2.多选-->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <h2>你选择的是：{{hobbies}}</h2>


    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          isAgree:false,//单选框
          hobbies:[],//多选框
        }
      })
    </script>
</body>
</html>

四、v-model与select下拉菜单

1.单选时

  • v-model绑定的是一个值
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
<!--      1.选择一个-->
    <select name="fruit" id="" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="草莓">草莓</option>
    </select>
	<h2>你选择的是：{{fruit}}</h2>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          fruit:"香蕉"
        }
      })
    </script>
</body>
</html>

2.多选时

  • 此时v-model绑定一个数组
  • 按住shift或ctrl多选时,value值会加入到数组中
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">

    <select name="fruit" id="" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="草莓">草莓</option>
    </select>
    <h2>你选择的是：{{fruits}}</h2>
    </div>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          fruits:[]
        }
      })
    </script>
</body>
</html>

五、v-model的值绑定

  • 从data获取数据后，动态给value赋值
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">

<!--    3.值绑定-->
    <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h2>你选择的是：{{hobbies}}</h2>
  </div>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
      new Vue({
        el:"#app",
        data:{
          msg:"haha",
          originHobbies:['篮球','足球','羽毛球','乒乓球','台球']
        }
      })
    </script>
</body>
</html>

六、v-model的修饰符

1.lazy

  • 默认情况下input输入框与v-model绑定值是同步输入的
  • lazy可以避免数据的频繁刷新，即只有失去焦点或者回车后数据才会进行更新
<input type="text" v-model.lazy="msg">
<h2>{{msg}}</h2>

2.number

  • 默认情况下v-model总是把输入的变量自动转换为字符串
  • number可以让输入的内容转换为number类型
    <input type="number" v-model.number="age">
    <h2>{{age}}--{{typeof age}}</h2>

3.trim

  • trim修饰符可以过滤内容左右两边的空格
   <input type="text" v-model.trim="name">
   <h2>名字：{{name}}</h2>

不加trim时网页渲染时显示不出来空格，实际上是有空格，在控制台里可以查看，如果不想出现空格，就加上trim。

总结

    1. v-model与input输入框绑定时双向绑定值；
    1. 与radio单选框绑定时绑定是否选中布尔值；
    1. 与checkbox多选框绑定时绑定值；
    1. 与select下拉菜单绑定时绑定值；
    1. v-model的值绑定是基于v-bind动态赋值value；
    1. v-model有修饰符。
maya1024
关注
专栏目录
手把手学习Vue3.0：使用v-model和v-bind的区别
帅哥趣谈
03-13 579
我的学习方法是先看官方文档，
Vue组件中v-model的数据更新问题及解决方法
laugh666的博客
08-30 2064
Vue组件中v-model的数据更新问题及解决方法在Vue.js中，我们经常使用v-model指令来实现双向数据绑定，方便地在组件和父组件之间传递数据。然而，有时候我们会遇到一个问题：在某些情况下，通过修改组件内部的数据，无法触发v-model绑定的数据更新。本文将介绍这个问题的原因，并提供解决方案。
vue渲染函数使用createElement创建可双向绑定的input
IT学霸
05-02 1万+
昨天晚上开始看官方文档的渲染函数这一节。看完后，对createElement的使用还是懵懵懂懂的，只好动动手，再查查资料，总算有些收获。 一、前言 对于createElement这个函数的第二个参数，一定要弄清楚attrs，props，domProps这3个属性的用法，什么时候用。今天说的可双向绑定的input，就用到了domProps。 二、使用 首先定义一个input组件，如下所示： ...
vue2.x 学习笔记v-mdel
小鱼酱的博客
05-05 417
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
vue自定义组件中实现v-model
Linho的博客
04-26 1130
其实在vue的组件中实现v-model指令的方法就是父子组件传值的方法，只不过不用特别去父组件定义事件罢了，实现方式（不是方法）有两种： 1.vue中默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event //子组件test.vue <template> <div> <p>{{value}}...
【vue】v-model
richest_qi的博客
08-09 410
//index.js import Vue from "vue"; import App from "./app.vue"; const vm = new Vue({ render:h => h(App) }).$mount('#root'); //app.vue <template> <div> <label for="username">用户名:</label> <input type="te
VUE自定义组件的v-model
nuanyang1233的博客
09-23 242
vue自定义组件的v-model，实现表单元素和数据的双向绑定
3分钟认识Vue3的v-model
emgexgb_sef的博客
08-01 667
v-model是Vue内置的指令作为属性接收一个变量（不能是常量）绑定到普通组件和自定义组件中//作为普通组件的属性,只有作为表单内的元素属性时才会生效如//作为自定义组件的属性v-model同时做了两件事情属性绑定和自定义事件绑定//内置组件//相当于//自定义子组件//相当于v-model绑定在自定义组件上时，我们需要手动去接收//自定义组件注意。...
vue面试题目|vue组件化理解，v-for,v-model
最新发布
2301_79125431的博客
04-29 1041
最近鼠鼠收到了上海追势科技的实习offer，bg双非本9硕，0项目0实习，数学系。已经跟hr确认了offer和报道时间，但可能不想去的话，可以不去吗，虽然实习offer而已，好像没有。腾讯自从上周四二面完，既不挂我，也不约面，，能不能给我个痛快，不行就赶紧挂了，我还说不定能赶上最后一。本人第一次面试，遇到了个很好的技术面试官，本人是个菜鸡，面试官一直引导我给我提示，还给我建议，受益匪。笔试全英文，五个大题，一个BCI测试相关的，一个buck电路相关的，再就是一些零零散散硬件、射频的知。
vue3 v-model
08-29
- *1* *3* [3分钟认识Vue3的v-model](https://blog.csdn.net/weixin_48115935/article/details/124907016)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
vue 自定义组件v-model
qq_41144591的博客
04-11 7015
vue 自定义组件v-model,vue3不知道可不可以，只试了vue2
Vue知识点总结(5)——v-model（超级详细）
CreatorRay的博客
12-19 714
今天的内容是v-model 双向数据绑定是Vue的灵魂特点之一，v-model是完美的体现了Vue双向绑定的特点。 你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected，attribute 的初始值
关于createElement的一些点
qq_41430522的博客
04-12 1076
1.这里我用h代指createElement h('div',{ domProps:{ innerHTML:'bag' } },[ h('span',{ domProps:{ innerHTML:'bag' } },[]), h('span',{ domProps:...
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
热门推荐
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
04-09 1万+
在计算机科学中，语法糖（syntactic sugar）是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言，使操作变得更加清晰、方便，或者更加符合程序员的编程习惯。具体来说，语法糖是语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器，包括编译器，静态分析器等，经常会在处理之前把语法糖构件转换成更加基础的构件，这个过程通常被称为"desugaring"。简而言之，语法糖就是一种便捷写法。
vue 渲染函数 与 JSX
青蛙king的博客
10-12 1652
vue 的渲染函数 与 JSX
详解vue中的v-model
weixin_57446003的博客
11-20 2900
vue.js 中 v-model 语法糖的使用及进阶用法
Vue
HBF__cg的博客
04-15 571
Vue.js vue.js前端主流框架，一套用于构建用户界面的渐进式框架，研发者尤雨溪 vue.js的引入 构建用户界面：ui html css 静态页面 渐进式框架：延伸出来有五部分    1.模板引擎 类似于pug nunjucks    2.组件(核心功能之一),增加页面的复用性    3.路由    4.状态管理器(统筹管理属性-可伸缩性)    5.自动化构建 渐进式的原理：一步一步执...
vue自定义组件v-model
lh1144151563的博客
01-21 1万+
自定义组件使用v-model vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子： <input type="text" v-model="message"> <p>{{message}}</p> // v-model只是语法糖，真正的实现形式： <input type="text" :value="message" @input="message = $event.target.value"> 将输入框的值绑定到message变量上，这
vue中v-model详解
weixin_66375317的博客
05-15 1733
vue中v-model详解
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值