<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> <input type="text" v-model="msg"> <p>----------------------</p> <h1>{{msg2}}</h1> <input type="text" :value="msg2" @input="valueChange"> <p>----------------------</p> <label><input name="sex" type="radio" value="男" v-model="sex">男 </label> <label><input name="sex" type="radio" value="女" v-model="sex">女 </label> <h2>{{sex}}</h2> <p>----------------------</p> <!-- 勾选一个 --> <label> <input type="checkbox" v-model="isAgree">同意 </label> <h2>{{isAgree?'同意':'不同意'}}</h2> <button :disabled="!isAgree">sign</button> <p>----------------------</p> <!-- 多个选择 --> <label>爱好：</label> <input type="checkbox" value="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <h2>{{hobbies}}</h2> <p>----------------------</p> <!-- 值绑定 --> <label>爱好：</label> <label v-for="hobby in hobbies2_" :for="hobby"> <input type="checkbox" :id="hobby" :value="hobby" v-model="hobbies2">{{hobby}} </label> <h2>{{hobbies2}}</h2> <p>----------------------</p> <select name="city" v-model="city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="深圳">深圳</option> </select> <p>{{city}}</p> <p>----------------------</p> <select name="cities" v-model="cities" multiple> <option value="北京">北京</option> <option value="上海">上海</option> <option value="深圳">深圳</option> </select> <p>{{cities}}</p> <p>----------------------</p> <!-- lazy --> <input type="text" v-model.lazy="msg3"> <h1>{{msg3}}</h1> <!-- number --> <input type="number" v-model.number="age"> <h1>{{age}}====={{typeof age}}</h1> <!-- trim --> <input type="text" v-model.trim="name"> <h1>xxxx{{name}}xxxx</h1> </div> <script src="js/vue.3.2.2.js"></script> <script> // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg:'你好！', msg2:'你好2！', msg3:'你好3！', sex:'男', isAgree:false, hobbies:[], hobbies2_:["篮球","足球","羽毛球","乒乓球"], hobbies2:[], cities:['北京','上海','深圳'], city:'北京', age:0, name:'' } }, methods:{ valueChange(event){ this.msg2=event.target.value; } } }).mount('#app'); </script> </body> </html>