Vue2.0学习笔记-5、v-model指令实现双向数据绑定(唯一一个能够实现双向数据绑定的指令)

最新推荐文章于 2024-04-19 11:44:24 发布

不收藏找不到我

最新推荐文章于 2024-04-19 11:44:24 发布

阅读量694

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_41364246/article/details/109595053

版权

vue学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、什么是数据双向绑定？
所谓的数据双向绑定就是用户对界面的操作可以实时的同步到数据中，同时，数据又会展示到界面上。话不多说，看下面的例子：
代码：
这里通过v-bind指令实现数据绑定，注意，这里的数据绑定不是双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h4>{{msg}}</h4>
			<input type="text" name="" id="" :value="msg" />
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'第一个vue实例'
			}
		})
	</script>
</html>

效果：
在这里插入图片描述
那么此时我更改输入框中的内容，h4标签内的内容并不会同步更改：

这种就不是双向绑定，如果是双向绑定，h4标签内的内容也会实时修改(内容保持和输入框中的内容一致)请看下面的例子：
代码：

		<div id="app">
			<h4>{{msg}}</h4>
			<input type="text" name="" id="" v-model="msg" />
		</div>

更改输入框中内容,h4标签内的内容也会随之修改：
在这里插入图片描述

2、结论

(1)v-model指令能够实现数据双向绑定
(2)v-model指令只能应用于表单元素
(3)v-model不同于v-bind，其后面引号的内容不能执行进行字符串拼接的操作，请看示例：

		<div id="app">
			<h4>{{msg}}</h4>
			<input type="text" name="" id="" v-model="msg+'122'" />
		</div>

结果：
在这里插入图片描述
3、我的发现
看了看其他人的总结，我发现：
(1)v-model指令相当于下面这段代码：
v-model：

<input v-model="inputValue">

相当于：

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

(2)v-model也可以和.lazy、.trim和.number这些修饰符一起使用
.lazy
在默认情况下，v-model 在input事件中同步输入框的值与数据。
在添加了lazy之后，会把 oninput 事件改成 onchange 事件。

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

.trim
trim的作用是过滤用户输入时首尾的空格字符。

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

.number
number 修饰符会把 v-model 的值转换成数值类型。

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

结合(1)中的发现，你联想到了什么？这些事件修饰符相当于什么？

不收藏找不到我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0学习笔记-5、v-model指令实现双向数据绑定(唯一一个能够实现双向数据绑定的指令)

1、什么是数据双向绑定？所谓的数据双向绑定就是用户对界面的操作可以实时的同步到数据中，同时，数据又会展示到界面上。话不多说，看下面的例子：代码：这里通过v-bind指令实现数据绑定，注意，这里的数据绑定不是双向绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsde
复制链接

扫一扫