vue指令之v-model
v-model属性是使用在表单元素中的，作用是实现表单和数据的双向绑定
传统的表单
<div id="app" v-clock>
<p>
姓名：<input type="text" ：value="val">
{{val}}
</p>
</div>
<script src = "js/vue.js"></script>
<script>
var vue = new Vue({
el: "#app",
data: {
val:"张三",
},
})
</script>
但是当用户在输入框输入内容是，vue中的data的val值却没有发生变化
当使用v-model属性时：
1 <p> 2 姓名：<input type="text" v-model="val"> 3 {{val}} 4 </p>
可以发现data中的数据随输入框中的数据改变而改变
下面做一个案例
1 <div id="app" v-clock> 2 <h2>问卷调查</h2> 3 <p> 4 姓名：<input type="text" v-model="name"> 5 </p> 6 <p> 7 性别： 8 <input type="radio" name="sex" value="男" v-model="sex">男 9 <input type="radio" name="sex" value="女" v-model="sex">女 10 </p> 11 <p> 12 爱好： 13 <input type="checkbox" name="hobby" value="打篮球" v-model="hobby">敲代码 14 <input type="checkbox" name="hobby" value="跳舞" v-model="hobby">打游戏 15 <input type="checkbox" name="hobby" value="读书" v-model="hobby">读书 16 </p> 17 <p> 18 籍贯： 19 <select name="native" id="" v-model="native"> 20 <option value="河北">河北</option> 21 <option value="河南">河南</option> 22 <option value="山东">山东</option> 23 <option value="山西">山西</option> 24 <option value="湖南">湖南</option> 25 <option value="湖北">湖北</option> 26 </select> 27 </p> 28 <p> 29 您填写的表单内容为：姓名：{{name}}，性别：{{sex}}，爱好：{{hobby}}，籍贯：{{native}} 30 </p> 31 <button @click="submit">提交</button> 32 </div> 33 34 <script src = "js/vue.js"></script> 35 <script> 36 var vue = new Vue({ 37 el: "#app", 38 data: { 39 name: '', 40 sex: '男', 41 hobby: [], 42 native: '河北' 43 }, 44 methods:{ 45 submit() { 46 //汇总信息提交到后端 47 let obj = { 48 name: this.name, 49 sex: this.sex, 50 hobboy: this.hobby, 51 native: this.native 52 } 53 console.log(obj) 54 } 55 } 56 }) 57 </script>
