<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app"> <input type="text" v-model="value"> <!-- 双向绑定，输入实时绑定 --> <input type="text" v-model.lazy="value"> <!-- 懒加载，输入完毕才加载 --> <input type="text" v-model.trim="value"> <!-- 修饰符，去除首位空格 --> <input type="text" v-model.number="value"> <!-- 修饰符，数字input --> <h1>{{value}}</h1> <!-- 原理刨析，单向绑定实现双向绑定 --> <input type="text" :value="message" @input="valChange"> <!-- @input : 输入事件 --> <h1>{{message}}</h1> <!-- radio运用 --> <label for="male"> <input type="radio" id="male" value="男" v-model="sex">男 </label> <label for="female"> <input type="radio" id="female" value="女" v-model="sex">女 </label> <h1>性别：{{sex}}</h1> <!-- checkbox单选框运用 --> <label for="agree"> <input type="checkbox" id="agree" v-model="isAgrees">同意协议 </label> <button :disabled="!isAgrees">下一步</button> <!-- checkbox多选框运用 --> <div> <label v-for="(item,i) in hobbies_all"> <input type="checkbox" v-model="hobbies" :value="item">{{item}} </label> </div> <h1>你的爱好{{hobbies}}</h1> <!-- select运用 --> <select name="" id="" v-model="area"> <option value="江西">江西</option> <option value="湖北">湖北</option> </select> <h1>你的地区：{{area}}</h1> </div> </body> <script> /* v-model 表单绑定 */ const app = new Vue({ el : "#app", data : { value : "123", message : "msg", sex : "男", isAgrees : false, hobbies_all : ["篮球","足球","乒乓球"], hobbies : [], area : "江西" }, methods : { valChange : function(event){ // 通过事件获取输入的值 let val = event.target.value; // 绑定 this.message = val; } } }); </script> </html>