Vue的v-model详解

最新推荐文章于 2024-08-16 15:49:18 发布
最新推荐文章于 2024-08-16 15:49:18 发布
阅读量6.6k 收藏 9
点赞数 3
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42969725/article/details/113056102
版权

文章目录

一，v-model是什么？

<body>
<div id="app">
    <input type="text" v-model="msg">
    <h2>{{msg}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'hello',
        }
    })
</script>
</body>

结果：在这里插入图片描述
在这里插入图片描述

二，作用

Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。

  1. 因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg , msg发生改变。
  2. 当msg发生改变时,因为上面使用了插值语法将msg的值插入到DOM中,所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。

三，原理

v-model本质上是个语法糖，其实现原理包含两个步骤

  1. 通过v-bind绑定一个value属性
  2. 通过v-on指令给当前元素绑定input事件
<input type="text" :value="msg" v-on:input="msg=$event.target.value">

v-on:input="" 用于动态监听用户输入的信息，在界面上产生一个事件后，浏览器会生成一个event对象，这个event对象就包含了输入的信息

四，类型

除了上面的文本类型，v-model还能结合其他类型使用

1. v-model：radio

<div id="app">
    <!--当v-model绑定的是同一个变量，可以不加name属性来实现radio的互斥-->
    <label for="right">
        <input type="radio" id="right" name="judge" value="对" v-model="judge">对
    </label>
    <label for="wrong">
        <input type="radio" id="wrong" name="judge" value="错" v-model="judge">错
    </label>
    <h2>你的判断是：{{judge}}</h2>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            judge:'对'  //目的：选择之后将值绑定到judge中
        }
    })
</script>

结果：
在这里插入图片描述
在这里插入图片描述

2. v-model：checkbox

单个复选框
<div id="app">
    <label for="ok">
        <input type="checkbox" id="ok" v-model="isOk">可以
    </label>
    <h4>{{isOk}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            isOk:false
        }
    })
</script>

结果：
在这里插入图片描述
在这里插入图片描述

多个复选框
<div id="app">
	<input type="checkbox" value="香蕉" v-model="fruits">香蕉
    <input type="checkbox" value="苹果" v-model="fruits">苹果
    <input type="checkbox" value="梨子" v-model="fruits">梨子
    <h4>爱吃的水果是：{{fruits}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            fruits:[]
        }
    })
</script>

结果：
在这里插入图片描述

3. v-model：select

<div id="app">
	<select name="" id="" v-model="type">
        <option value="电影">电影</option>
        <option value="动漫">动漫</option>
        <option value="电视剧">电视剧</option>
    </select>
    <h4>喜欢的视频类型是：{{type}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            type:'动漫'
        }
    })
</script>

结果：
在这里插入图片描述
在这里插入图片描述

五，修饰符

1. lazy

v-model在默认情况下同步了输入框的数据，就是说输入框数据一有改变，对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点之后才更新

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

2.number

默认情况下，输入框得到的数据最后都会变成字符串形式。number修饰符可以将输入框得到的内容转为数字类型。

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

3.trim

trim修饰符可以去掉从输入框获取的内容的左右两边的空格

<input type="text" v-model.trim="msg">
与繁星的相遇
关注
专栏目录
vue中v-model详解
qq_43569680的博客
06-05 4117
vue中v-model详解 v-model 本质上是一个语法糖，是v-bind和事件监听（@input）的合并操作。 vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素，经常在和这类表单元素中进行使用。 如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事件的一个
v-model
qq_33879627的博客
09-21 509
（十）v-model 10.1 v-model的基本使用 <div id="app"> <!-- 输入框内容修改，message也修改，修改message，input内容也修改，双向绑定 --> <input type="text" v-model="message">{{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue
入门 - vue中v-model的实现原理和完整用法详解
最新发布
qq_61863348的博客
08-16 1487
v-model是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。在view层，model层相互需要数据交互，即可使用v-model。inputselect等）可以简写为v-model，因为v-model默认收集的就是value值。
Hadoop-MapReduce学习
迷路剑客个人博客
01-24 1323
Hadoop-MapReduce学习 摘要 本文简要将就爱你过MapReduce，重点是Shuffle部分 0x01 MapReduce-Mapper侧 1.1 简介 以上是一张Hadoop官方创作的MR过程图示。我们以大数据届的HelloWorld-WordCount为例讲述下MR过程。 1.2 Split-分片 1.2.1 Split简述 Map阶段的输入通常是HDFS上文件。 在运行Ma...
Vue组件中的v-model（深入解析）
nibabaoo的博客
04-02 2813
这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。返回的值是一个 ref。值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的。小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上，在提供相同的。这里是另一个例子，展示了如何在使用多个不同参数的。在某些场景下，你可能想要一个自定义组件的。的返回值，可以在子组件中访问添加到组件。
Vue之v-model
2021_fc的博客
09-29 232
v-model的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../../js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="messa
vue v-model动态生成详解
08-27
Vue V-Model动态生成详解 Vue V-Model动态生成是 Vue 框架中一种常用的数据绑定方式，但是在某些场景下，使用 V-Model 动态生成时会遇到一些问题，例如在输入框中动态绑定字段名，使用传统的方法 value 动态绑定，...
vue3实现v-model原理详解
10-16
Vue 3中的v-model实现原理 Vue 3中v-model的实现原理与Vue 2.x有所不同。Vue 3的v-model不再直接提供双向绑定的语法糖，而是通过新的Composition API以及Proxy对象来实现响应式数据的变化与UI的更新。本文将详细...
Vue 进阶教程之v-model详解
08-30
Vue 进阶教程之 v-model 详解 v-model 是 Vue 中的一个指令，主要用来实现表单控件的双向数据绑定。在 Vue 中，v-model 指令可以用在 input 元素上，也可以用在组件上，本文将详细介绍 v-model 的使用和原理。 v-...
详解vue v-model
01-21
vue中v-model是一个语法糖，所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说，v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分： 通过props设置子组件的状态 ...
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
04-09 1万+
在计算机科学中，语法糖（syntactic sugar）是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言，使操作变得更加清晰、方便，或者更加符合程序员的编程习惯。具体来说，语法糖是语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器，包括编译器，静态分析器等，经常会在处理之前把语法糖构件转换成更加基础的构件，这个过程通常被称为"desugaring"。简而言之，语法糖就是一种便捷写法。
详解vue中的v-model
weixin_57446003的博客
11-20 2837
vue.js 中 v-model 语法糖的使用及进阶用法
Vue之v-model的使用
热门推荐
weixin_42504805的博客
06-09 2万+
v-model
vue中的v-model
qq_36545656的博客
11-05 1262
默认元素v-model： vue 中的v-model 实现了对数据的双向绑定，即 数据->模版，模版-> 数据 的绑定， 例如： <input type="text" v-model="message"> <p>{{message}}</p> v-model 是经过vue封装后的一个指令，目的是方便我们使用，它内部真实的实现方式： <input :value="message" @input="message = $event.target.
vue v-model的详细介绍
FGGIT的博客
02-03 3295
vue v-model的详细介绍
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

与繁星的相遇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值