VUE学习笔记：7.v-model指令讲解

最新推荐文章于 2024-04-18 16:58:47 发布
最新推荐文章于 2024-04-18 16:58:47 发布
阅读量703 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/117672063
版权

1.v-model介绍

在这里插入图片描述

  • v-model主要用来操作input标签，实现标签与数据的双向绑定
  • 双向绑定：即改变vue中数据的值会导致input标签中的值改变，同理改变input标签中的值来也会导致vue中数据的值改变。
  • 能双向绑定的input标签包括：text格式，select格式和textarea格式，radio格式，checkbox格式等

2.v-model的基本使用

格式如下：

<input type="text" v-model="message"/>
# 将input标签与数据message双向绑定，改变数据message的值或者改变input标签的value值，另一方都会改变。

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


<div id="app">
	<input type="text" v-model="message"/>
	<h3>{{message}}</h3>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			message: "哈哈哈"
        },
        

    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述

3.v-model的实现原理

在讲v-model指令的实现原理之前，我们需要了解input标签的特有的一个监听事件input。input事件主要用来监听用户是否中输入框中输入内容。

v-model的实现原理：

  • 实现数据到input标签的绑定：v-model通过v-bind指令将数据绑定到input标签的value属性，实现数据到input标签的单向绑定
  • 实现input标签到数据的绑定：v-model通过v-on实现对input标签的input事件的监听。当input事件发生时则将input标签中的最新的value值赋值给数据
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
	<input type="text" v-bind:value="message" v-on:input="inputcalue($event)"/>
	<h3>{{message}}</h3>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			message: "哈哈哈"
        },
		methods:{
			inputcalue: function(event){
				<!--将input标签的value值赋值给message-->
				this.message = event.target.value;
			}
		}
        

    })
</script>
</body>
</html>

效果与v-model一样。

4.v-model操作radio类型

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


<div id="app">
	<label for="man">
		<input type="radio" id="man" value="男" v-model="message"/>男
	</label>
	<label for="woman">
		<input type="radio" id="woman" value="女" v-model="message"/>女
	</label>
	<h3>你选择的性别是：{{message}}</h3>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			message: "男"
        }
		}
        

    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述

5.v-model操作checkbox类型

（1）操作checkbox类型的单选框

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


<div id="app">
	<label for="agree">
		<!--checkbox类型单选框，当选中时value为true，否则为false-->
		<input type="checkbox" id="agree" v-model="message"/>是否同意协议
	</label>
	<h3>是否同意协议：{{message}}</h3>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			message: false
        }
        

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

（2）操作checkbox类型的多选框

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


<div id="app">
	<label for="lanqiu">
		<!--checkbox类型多选框，必须有value属性且赋值-->
		<input type="checkbox" id="lanqiu" value="篮球" v-model="message"/>篮球
	</label>
	<label for="zuqiu">
		<!--checkbox类型多选框，必须有value属性且赋值-->
		<input type="checkbox" id="zuqiu" value="足球" v-model="message"/>足球
	</label>
	<label for="yumaoqiu">
		<!--checkbox类型多选框，必须有value属性且赋值-->
		<input type="checkbox" id="yumaoqiu" value="羽毛球" v-model="message"/>羽毛球
	</label>
	<label for="pingpangqiu">
		<!--checkbox类型多选框，必须有value属性且赋值-->
		<input type="checkbox" id="pingpangqiu" value="乒乓球" v-model="message"/>乒乓球
	</label>
	<h3>你的爱好是：{{message}}</h3>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			message: [] //因为data需要接受多选框的多个值，所以定义为数组
        }
        

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

6.v-model操作select类型

（1）操作select类型的单选框

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


<div id="app">
	<select name="aaa" v-model="message">
		<option value="苹果">苹果</option>
		<option value="香蕉">香蕉</option>
		<option value="桃子">桃子</option>
		<option value="葡萄">葡萄</option>
	</select>
	<h3>你喜欢的水果是：{{message}}</h3>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			message: '香蕉'
        }
        

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

（2）操作select类型的多选框

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


<div id="app">
	<!--select类型中增加multiple属性，表示该select为多选框-->
	<select name="aaa" v-model="message" multiple>
		<option value="苹果">苹果</option>
		<option value="香蕉">香蕉</option>
		<option value="桃子">桃子</option>
		<option value="葡萄">葡萄</option>
	</select>
	<h3>你喜欢的水果是：{{message}}</h3>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			message: []
        }
        

    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

7.值绑定操作

上面我们的例子中，选择框中的所有选项都是写死的。实际开发过程中，选择框中的选项值也应该是后台的数据动态绑定的。这就是值绑定。

以上面select单选框为例：

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


<div id="app">
	<!--select类型中增加multiple属性，表示该select为多选框-->
	<select name="aaa" v-model="message">
		<option v-for="item of allmessage" :value="item">{{item}}</option>
	</select>
	<h3>你喜欢的水果是：{{message}}</h3>
</div>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			message: '香蕉' ,//该数据记录用户的选择
			allmessage: ['苹果','香蕉','桃子','葡萄','番茄']//该数据记录选择框中的所有选项值
        }     
    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

8.v-model的修饰符讲解

在这里插入图片描述

  • lazy修饰符格式：v-model.lazy="xxx"
  • number修饰符格式：v-model.number="xxx"
  • trim修饰符格式：v-model.trim="xxx"
new nm个对象
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
填坑记录之Vue中v-model与:model区别
01-20
初做vue项目中遇到这个问题，记录一下。 源代码： 打算做的表单验证功能。结果发现在验证的过程中username规则的第一条正确了却一直通过不了。 通过控制台得知长度一直为1。原来是拿不到数据。 v-model通常用于input的双向数据绑定,它并不会向子组件传递数据。 :model是v-bind:model的缩写，是绑定自定义属性.它只是将父组件的数据传递给子组件，并没有实现父组件和子组件数据之间的双向绑定。 所以在form表单标签中，并没有向子组件传递数据，所以在input标签中获取不到数据。 正确的做法应该将form标签中v-model改为 :model，这样在子组件中才可以获
v-model的双向数据绑定实现原理（附：案例和项目实例）
热门推荐
您的博客
03-11 1万+
一. 前言。 相信对使用vue框架的童靴来说，v-model的使用都能信手沾来，熟悉的不能再熟悉，也都知道v-model其实是个语法糖。不过其究竟是怎么实现的双向数据绑定，很大一部分童靴还是心存疑虑。本文就根据最简单的案例和基于实际项目中最常用的实例来从两个角度讲解v-model的前世今生。 二. v-model的前世今生。 目前的几大主流MVC(VM)框架都实现了单向数据绑定。简而言之，vue中的v-model无非就是在单向数据绑定的基础上给对应表单元素（input、select等）添加了(in
vue3【实用教程】v-model（含给 v-model 添加参数，绑定多个 v-model ，v-model 的内置修饰符，自定义 v-model 的修饰符等）
最新发布
朝阳39的博客
04-18 3294
以为例：自动将第一个字母转为大写具体实现详见注释-- 选项式 API --> < script > export default {props : {modelValue : String , // 新增了名 modelModifiers 的 prop，用于获取自定义的修饰符 modelModifiers : {
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
qq_54075517的博客
08-10 4848
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
V-model的双向绑定原理
weixin_45613948的博客
09-17 9096
V-model的原理 在学习v-model的过程中手贱自己用原生JS实现了一遍v-model的双向绑定。。。 首先，v-model只是个语法糖，实际上原理给表单元素用绑定值和input或change事件，举个例子： <input v-model="value" /> //实际上等于 <input v-bind:value="value" @input="value = $event.target.value" /> 至于表单元素的用法可以自行查看Vue官网文档。 简单阐述一下， i
Elementui el-input 实现自定义 v-model
asing1elife's blog
09-24 9677
Vue 本身支持自定义组件实现 v-model ，但 el-input 作为 Elementui 的自定义组件也已经实现 v-model ，那么如果在自定义组件中使用 el-input ，但自定义组件也想实现 v-model ，应该怎么做？ 错误的方式 Vue 中让自定义组件实现 v-model 可参考 Vue自定义v-model 但如果按照这种方式想要让以下代码实现 v-model ，是不...
V-model详解
qq_41281195的博客
08-23 1667
是 Vue.js 中的一个指令，用于在表单控件或组件上创建双向数据绑定。它可以自动监听用户输入事件并同步更新数据，也可以监听数据变化并更新表单控件的值。假设现在有这样一个需求，就是子组件中有多个input，需要在父组件中指定每一个input绑定的value如何实现。v-model的双向数据绑定的本质是做了两件事，首先绑定数据v-bind,然后绑定更新事件。这些计算属性用于在组件和其父组件之间创建双向数据绑定。这些计算属性用于在组件和其父组件之间创建双向数据绑定。的事件，并将新的值作为参数传递给父组件。
VUE入门学习项目资料与学习笔记.zip
02-12
2. **常用指令**：Vue提供了多种内置指令，如v-if/v-else用于条件渲染，v-for进行循环遍历，v-bind简写为:`:`用于绑定属性，v-on简写为`@`用于事件处理，v-model用于双向数据绑定。理解这些指令能让你更有效地操作...
Vue学习笔记之表单输入控件绑定
12-11
本篇笔记将详细讲解Vue中的表单输入控件绑定。 1. **基础用法** - 单行文本输入：`<input v-model="msg" placeholder="edit me">` 这个例子中，`v-model`指令将`msg`变量与输入框的值关联，任何在输入框中的更改...
【狂神说】Vue笔记（全部完整）.zip
01-22
这些知识点在"【狂神说】Vue笔记"中应该会详细讲解，并可能包含实例代码和视频教程的配套说明，帮助学习者深入理解和掌握Vue.js框架。通过这个笔记，无论你是初学者还是有一定经验的开发者，都可以提升自己在Vue领域...
Vue.JS项目源码学习笔记PDF版＋源码地址.zip
08-05
2. **数据绑定**：讲解Vue.js的双向数据绑定原理，包括Mustache语法、v-model指令和计算属性的使用。 3. **指令系统**：涵盖Vue.js的内置指令，如v-if、v-for、v-bind和v-on，以及自定义指令的创建。 4. **组件化**...
B站vue笔记.doc
05-21
这篇笔记主要涵盖了Vue的一些核心概念和用法，由B站的王红元老师讲解。以下是笔记的主要内容： 1. **v-cloak**：这个指令用于在Vue实例初始化完成之前隐藏元素，避免数据未加载时插值表达式的闪烁。它通过CSS样式...
el-input 使用 oninput输入校验时，v-model数据不更新问题
Mazepk的博客
05-25 3910
描述：当el-input中对输入数据进行校验时，使用oninput后，数据不及时更新或者为空， 并且，如果是校验必填项，还会出现已输入内容，校验不通过的情况 原代码如下： <el-input v-model.number="maxLen" oninput="value=value.replace(/[^0-9]/g,'')" ></el-input> 注： 本例中校验的是正整数，v-model需要使用number，如果校验字符串，需去掉number 报错结果如下： 从图中
三、v-model指令的详细用法、事件修饰符、按键修饰符
qq_63011146的博客
02-02 6741
① v-model指令的详细用法 1.v-model指令，绑定文本框的内容，实现双向数据绑定 <input type="text" v-model="name"> 2.v-model指令，绑定多行文本框的内容，实现双向数据绑定 注意：在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。 <textarea cols="80" rows="4" v-model="address"&gt
v-model的实现原理
weixin_57959921的博客
03-09 2002
v-model的实现原理
Vue指令 v-model详解
WangYangsea的博客
07-02 1万+
前言 在一次的学习过程中，偶然发现v-model的一个“奇怪”使用方法，如下图： 描述： 在一个组件中，引入一个自定义组件input.vue。然后需要在父组件中操作input的输入框内容。父组件(index.vue)的子组件实例上定义了v-model；input.vue组件中定义一个props，有一个value值，另外input标签的input事件绑定了一个事件名为input 的 $emit。...
模型(model)
gogogokb的博客
02-27 3997
模型(model) 模型是一个场景中的子元素。模型本身不能存在，要存在于一个文件中("*.ttm"文件类型)，模型本身也不能仿真。模型必须被包含在一个场景中，以便于操作。 模型是由建立在同一层次树上的场景对象的选择来定义的，其中树的基必须是标记为对象是模型基的对象。可以通过[Menu bar --> File --> Load model …]来加载。使用model browser和scene view之间的拖放操作是更简单的一种方法。可以通过[Menu bar --> File --&g
Element-ui input输入框限制输入数字后，当输入非数字后v-model失效
HTML5_student的博客
11-15 1213
Element-ui input输入框限制输入数字后，当输入非数字后v-model失效
了解vue中的v-model,通俗易懂!
Maybe__row的博客
06-03 3250
v-model是什么? v-model 就是 vue 的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
用于监听 DOM 事件的指令是 A.v-on B.v-model C.v-bind D.v-html
07-27
v-model 用于在表单元素和 Vue 实例的数据之间创建双向绑定。 C. v-bind 用于动态地绑定一个或多个属性或属性值。 D. v-html 用于将数据作为 HTML 解析并插入到 DOM 中。 希望这个回答能够帮助到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值