<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <!--v-model一般都是数据属性或者方法里面声明的****--> <p>{{ msg }}</p> <textarea placeholder="" v-model="msg"></textarea> <!--只要绑定了v-model msg都会同时改变--> <!--单个复选框--> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <!--多个复选框,绑定到同一个数组--> <div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> <br> <!--for 和 id 一样的值作用就是 点击页面上的用户名就会自动聚集 跟点击输入框聚焦的效果一样--> <label for="username">用户名:</label> <!--懒监听--> <input type="text" v-model.lazy="msg2" id="username"> <p>{{msg2}}</p> <br> <!--单选框 绑定的是父级标签select不是option 所以select额度跟 span里的selected有关联--> <div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <!--多选绑定数组--> <div id="example-6"> <select v-model="selected2" multiple style=" 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected2 }}</span> </div> <br> <!--清除前后空格--> <input v-model.trim="msg3"> <p>{{msg3}}</p> </div> </div> <script src="vue.js"></script> <script> // v-model 只能应用在 input textarea select标签中 //双向数据绑定:之前的操作都是数据到view的过程(return 返回的数据给回div里的msg) //先有数据到view,更改view,再有反向的 //一开始return 里面的msg 在加载页面的时候就已经放在了div中显示msg的位置了,有了数据到view的过程 //更改view就是在input输入框里改输入框的变化,就是修改msg, //这时候data中的msg会随着变化, 进而导致<p>里面的msg跟着改变 new Vue({ el: "#app", data() { return { msg: "alex", msg2:"wusir", msg3:"", checked: false, checkedNames: [], selected: "", selected2:[], }//怎么显示到input的输入框?以前是用过value属性,在vue里value属性会被忽略掉 } }) </script> </body> </html>