双向绑定：
1.数据发生变化时候，视图发生了变化
2.视图发生变化，数据也会发生变化！
实现数据绑定：v-model
我们使用 v-model 指令在<input> <textarea> <select> 元素上实现双向绑定 。绑定的是标签value的值
v-model=" "
文本框
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
输入文本<input type="text" v-model="message"><br>
您输入的内容是:{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm= new Vue({
el: "#app",
data: {
message: "",
}
});
</script>
</body>
</html>
v-model绑定的是标签value属性的值。这里我们加深一下印象
单选框
<div id="app1">
性别
<input type="radio" value="这是男孩" name="sex" v-model="test"> 男
<input type="radio" value="这是女孩aaaa" name="sex" v-model="test"> 女
<br>
我们选中了谁:{{test}}
</div>
<script>
var vm1= new Vue({
el: "#app1",
data: {
test: "",
}
});
</script>
下拉框
<div id="app2">
下拉选择
<select v-model="selected" >
<option value="" disabled>请选择</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
<br>选择了{{selected}}
</div>
<script>
var vm2= new Vue({
el: "#app2",
data: {
selected: "",
}
});
</script>