vue系列文章（5）双向数据绑定

最新推荐文章于 2022-05-19 10:05:28 发布

互联网极客

最新推荐文章于 2022-05-19 10:05:28 发布

阅读量308

点赞数

分类专栏： ----前端开发

本文链接：https://blog.csdn.net/jsqfengbao/article/details/94740181

版权

----前端开发专栏收录该内容

32 篇文章 3 订阅

订阅专栏

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	
</head>
<body>
	<div id="app">
         <!--第一种方法是使用ref进行的双向绑定，利用了$refs获取value值进行绑定-->
		<h1>双向数据绑定： input,select,textarea</h1>
		<label>姓名：</label>
		<input type="text" ref="name" v-on:keyup="logName">
		<span>{{name}}</span>
		<label>年龄：</label>
		<input type="text" ref="age" v-on:keyup="logAge">
		<span>{{age}}</span>
        <!--第二种则直接进行的双向绑定，使用了vue提供的v-model指令-->
		<h1>另一种双向数据绑定</h1>
		<label>姓名：</label>
		<input type="text" v-model="name2">
		<span>{{name2}}</span>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

new Vue({
	el: '#app',
	data: {
		name: '',
		name2: '',
		age: ''
	},
	methods: {
		logName: function() {
			this.name = this.$refs.name.value;
		},
		logAge: function() {
			this.age = this.$refs.age.value;
		}
	}
});

Vue系列文章目录

如果上面文章对你有用，打赏下我吧@*@

互联网极客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue系列文章（5）双向数据绑定

你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的value、checked、s...
复制链接

扫一扫