国庆节10月1日
--


使用v-model在表单元素上实现数据和视图的双向绑定
v-model指令用于在表单元素上实现双向数据绑定。它可以方便地获取或设置表单项数据,实现Vue数据与表单输入之间的自动同步。
1<!-- 文本输入框 -->2<input type="text" v-model="username">3
4<!-- 下拉选择框 -->5<select v-model="selected">6 <option value="A">选项A</option>7 <option value="B">选项B</option>8</select>9
10<!-- 多选框 -->11<input type="checkbox" v-model="checked">12
13<!-- 单选框 -->14<input type="radio" v-model="picked" value="a">1<form class="search-form">2 <input type="text" v-model="searchEmp.name" placeholder="姓名" />3 <select v-model="searchEmp.gender">4 <option value="">性别</option>5 <option value="1">男</option>6 <option value="2">女</option>7 </select>8</form>数据源要求:
v-model绑定的变量必须在data()中定义双向绑定原理:
v-bind和v-on的语法糖修饰符:
.lazy:在change事件后同步数据.number:将输入转为数字类型.trim:自动过滤首尾空白字符自定义组件:
v-model需要特殊处理modelValue和update:modelValue与原生表单区别:
如果你喜欢,那么欢迎来到我的世界!
了解更多暂未播放



"所有的相遇都是久别重逢。"—— 未知


