Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化时，视图也就发生变化，当视图发生变化的时候，数据也会梗着同步变化。
v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
输入的文本<input type="text" v-model="message"/>{{message}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
message: '默认输入内容'
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
<textarea v-model="message" cols="20" rows="10"></textarea>
输入的文本{{message}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
message: '默认输入内容'
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
性别：
<input type="radio" name="gender" value="男" v-model="choice"/>男
<input type="radio" name="gender" value="女" v-model="choice"/>女
<p>
选中了: {{choice}}
</p>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
choice: '女'
}
});
</script>
</body>
</html>
v-model会忽略所有表单元素的vaule、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项来声明初始值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
下拉选择：
<select v-model="selected">
<option value="" disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<p>
选中了: {{selected}}
</p>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
selected: ''
}
});
</script>
</body>
</html>
