<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="../js/vue.js"></script></head><body><!-- v-model双向绑定 --><div id="app"><p>{{ name }}</p><!-- 1单行文本框 --><!-- <input type="text" :value="name" @input="name=$event.target.value" /> --><input type="text" v-model="name"><!-- 2单选按钮 --><input type="radio" value="male" v-model="sex">男<input type="radio" value="female" v-model='sex'>女<input type="radio" value="zhong" v-model="sex">中<!-- 3复选框 --><input type="checkbox" value="programming" v-model="hobbies">编程<input type="checkbox" value="movie" v-model="hobbies">电影<input type="checkbox" value="sports" v-model="hobbies">运动<!-- 4、下拉列表 --><select name="" id=""><option value="0">--请选择大专学历--</option><option value="1">研究生</option><option value="2">本科</option><option value="3">大专</option></select><!-- 修饰符(.num)数据转化为数值类型，如果无法转换返回字符串.lazy 默认使用input事件，可以使用change事件（失去焦点）.trim 去除俩侧的空格--><input type="text" v-model.number.lazy="num"><input type="text" v-model.trim="name"></div><script>Vue.createApp({data(){return {name:'tom',sex:'male',hobbies:[],degree:2,num:6}}}).mount("#app")</script></body></html>
