v-model使用
注意它是自动帮你确认值的！！！无需关心过程，把json数据一丢到data中，自动选中。
1. 简单的demo
实现一边在输入框输入，一边显示输入框的内容
2. 三种框的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 数据双向绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 中文文档地址 -->
</head>
<body>
<!-- 数据和model的双向绑定-- 表单输入绑定
https://cn.vuejs.org/v2/guide/forms.html
-->
<div id="app">
<h4>msg: {
{ message }}</h4>
<input type="text" v-model="message"/>
</div>
<!-- 单选框 -->
<div id="app1">
<h4>gender: {
{ gender }}</h4>
<input name ="gender" type="radio" value="男" v-model="gender"> 男
<input name ="gender" type="radio" value="女" v-model="gender"> 女
</div>
<!-- 多选框 -->
<div id="app2">
<h4>hobby: {
{ hobby }}</h4>
<input name="hobby" type="checkbox" value="1" v-model="hobby">篮球
<input name="hobby" type="checkbox" value="2" v-model="hobby">羽毛球
<input name="hobby" type="checkbox" value="3" v-model="hobby">pingPong球
<input name="hobby" type="checkbox" value="4" v-model="hobby">足球
</div>
<!-- 下拉框 -->
<div id="app3">
<h4>selected: {
{ selected }}</h4>
<select v-model="selected">
<option value="" disabled>=== 请选择 ====</option>
<option>java</option>
<option>python</option>
<option>go</option>
</select>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "hello, vue.js!"
}
});
new Vue({
el: "#app1",
data: {
gender: "女"
}
});
new Vue({
el: "#app2",
/* 多个复选框请使用数组 */
data: {
hobby: ["2", "3"]
}
});
/* 下拉框 绑定数据 */
new Vue({
el: "#app3",
data: {
selected: ""
// selected: "java" 会自动选中java这一项
}
});
</script>
</body>
</html>
