8.《vue之v-model数据双向绑定》

最新推荐文章于 2022-10-21 16:20:47 发布

@逆风微笑代码狗

最新推荐文章于 2022-10-21 16:20:47 发布

阅读量156

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_44864082/article/details/105601583

版权

v-bind:是单项绑定，只能单方面交互，但是有时候提交表单元素的时候，必须事项双向的互动，所以就有V-MODEL的运用

v-model实现双向绑定

v-model指令,主要运用到表单元素上！

大家都知道v-model可以实现双向绑定,但是否想过它的本质?

其实本质上的v-model不过是监听用户的input事件来更新数据,以及对一些情况做特殊管理.而数据的来源便是vue实例中的data.

接下来通过案例来看一下V-MODEL的使用效果！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件修饰符之.stop</title>
	</head>
		<script type="text/javascript" src="js/vue.js" ></script>
	<body>
		<div id="app">
			<p>{{ msg }}</p>
			<input type="text" v-model:value="username"/>
		</div>
		<script>
	       //vue默认情况下保持单向数据绑定，如果修改了vue保存的数据，会立刻同步到页面上，
	       //但是修改页面的文本节点，不会修海vued的保存数据
			var  vm=new Vue({
				el:"#app",
				data:{
					msg:"这是一个段落",
					username:'提示消息'
				}
			
		});
		</script>
		
		
		
		
	</body>
</html>

注意：vue默认情况下保持单向数据绑定，如果修改了vue保存的数据，会立刻同步到页面上，但是修改页面的文本节点，不会修海vued的保存数据

谢谢访问！

@逆风微笑代码狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.《vue之v-model数据双向绑定》

v-bind:是单项绑定，只能单方面交互，但是有时候提交表单元素的时候，必须事项双向的互动，所以就有V-MODEL的运用v-model实现双向绑定v-model指令,主要运用到表单元素上！大家都知道v-model可以实现双向绑定,但是否想过它的本质?其实本质上的v-model不过是监听用户的input事件来更新数据,以及对一些情况做特殊管理.而数据的来源便是vue实例中的data....
复制链接

扫一扫