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

你可以用 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系列文章（5）双向数据绑定

猜你喜欢