一、v-model的用法简介
在表单控件或者组件上创建双向绑定，其实就是给表单控件或者组件绑定数据。
二、案例
①index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="styles.css" />
<title>Vue CDN</title>
</head>
<body>
<div id="vue-app">
<h1>双向数据绑定 input / select / textarea</h1>
<label>姓名</label>
<input type="text" v-model="name" />
<span>{{ name }}</span>
<label>年龄</label>
<input type="text" v-model="age" />
<span>{{ age }}</span>
</div>
</body>
<script src="app.js"></script>
</html>
②对应的js.文件：app.js
// 实例化vue对象
new Vue({
el: '#vue-app', // element
data() {
return {
name: '',
age: 32
};
},
methods: {
logName() {
console.log('正在输入名字...');
},
logAge() {
console.log('正在输入年龄...');
}
}
});
③对应的css文件styles.css
#canvas {
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333;
}