表单输入绑定
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
多选框
<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>
</div>
<!--原始写法的多选组-->
单选框
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<!--原始写法的单选组-->
单选下拉
<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="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
<!-- 多选下拉的原始写法-->
修饰符
.lazy 输入框的数值在change的时候才与数据同步
<input v-model.lazy="message" />
.number 将用户输入的值转为数值类型
<input v-model.number="enterCode"/>
<!--如果这个值无法被 parseFloat() 解析,则会返回原始的值。-->
.trim 去除用户输入的字符的首尾空格
<input v-model.trim="string"/>
如果需要去除所有的空格,要用到正则对输入的字符串进行处理
可使用 str.replace(/\s+/g, “”);,加在input的事件上,阻止用户输入空格:
<input v-model.trim="string" @input="setString" />
<!--函数部分-->
setString(){
this.string = String(this.string).replace(/\s+/g, "")
}