前言
我们这节课学习表单输入绑定，简单来说就是通过v-model来绑定输入框
基础用法
我们可以使用v-model指令来在input、textarea、select等元素上创建双向数据绑定
v-model会根据控件的类型来判断选取正确的方法来绑定和更新数据
v-model实际上是一个语法糖，负责监听用户输入事件来更新数据
并在某种极端特殊场景下进行一些特殊处理
PS：
v-model实际上是value和input事件的组合
一个负责绑定数据，一个负责接受事件并且再次设置数据
但v-model与我们手写的事件主要区别就在于
v-model还对输入法事件进行了一定的处理
提示
v-model会忽略表单元素的value checked selected属性的初始值
它将始终将当前活动实例的数据作为该元素的数据来源
所以如果我们想设置初始值，应该在组件的data选项内声明初始值
v-model在内部会为不同的输入元素使用不同的属性并抛出不同的事件
text和textarea元素会只用value属性以及input事件
checkbox和radio使用check属性以及change事件
select使用value属性以及change事件
对于使用输入法，如中文日文韩文等语言
会发现v-model不会在输入法阻止过程中进行更新
如果也想响应这些更新，请适应input和value来代替v-model
附注
这里是因为v-model在compross输入法事件做了监听而且进行了专门的处理，让在输入法触发的过程中不会响应相应的更新
文本
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>
插值在textarea中不起作用，所以要是用v-model来进行代替
<!-- bad -->
<textarea>{{ text }}</textarea>
<!-- good -->
<textarea v-model="text"></textarea>
复选框
单个复选框会绑定布尔值
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
多个复选框，要绑定到同一个数组
<div id="v-model-multiple-checkboxes">
<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>
Vue.createApp({
data() {
return {
checkedNames: []
}
}
}).mount('#v-model-multiple-checkboxes')
单选框
<div id="v-model-radiobutton">
<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>
Vue.createApp({
data() {
return {
picked: ''
}
}
}).mount('#v-model-radiobutton')
选择框
<div id="v-model-select" class="demo">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
Vue.createApp({
data() {
return {
selected: ''
}
}
}).mount('#v-model-select')
v-model表达式初始值未能匹配任何选项，select元素将渲染为未选中的状态
在ios中，会使用户无法选择第一个选项，在这样的情况下，ios不会触发change选项
因此最好提供一个空的禁用选项
多选时绑定到一个数组
Vue.createApp({
data() {
return {
selected: ''
}
}
}).mount('#v-model-select')
v-for渲染的动态选项
Vue.createApp({
data() {
return {
selected: ''
}
}
}).mount('#v-model-select')
Vue.createApp({
data() {
return {
selected: ''
}
}
}).mount('#v-model-select')
值绑定
这里我也没太理解意思....
对于单选按钮，复选框，以及选择框的选项
v-model绑定的通常为静态字符串。
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
有时候我们想把值绑定到一个动态数据上，这时候可以使用v-bind实现
同时使用v-bind可以将输入值绑定为一个非字符串
复选框
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
// 当选中时：
vm.toggle === 'yes'
// 当未选中时：
vm.toggle === 'no'
这里的话我也没太理解...有机会再修正
这里的 true-value 和 false-value attribute 并不会影响输入控件的 value attribute，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(即“yes”或“no”)，请换用单选按钮。
单选框
<input type="radio" v-model="pick" v-bind:value="a" />
选择框选项
<select v-model="selected">
<!-- 内联对象字面量 -->
<option :value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123
修饰符
.lazy
在默认情况下，每次input触发会与数据同步，可以添加lazy，变为change事件后进行同步
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />
.number
将用户的输入转为数值类型，可以在v-model添加number修饰符
<input v-model.number="age" type="text" />
如果这个值无法被parseFolat解析，则会返回原始的值
.trim
自动过滤前后空白字符，对v-model添加trim修饰符
在组件上使用v-model
HTML原生的输入元素类型并不总能满足需求
Vue组件系统允许你创建并且具有自定义行为可复用的输入组件
这些输入组件甚至可以和v-model一起使用
结语
撒花~
置顶卡
沉默卡
照妖镜