양식 입력 바인딩
목차
기본 사용법
<input>, <textarea> 및 형식으로 하세요. 컨트롤 유형에 따라 요소를 업데이트하는 올바른 방법을 자동으로 선택합니다. 그 마법에도 불구하고 v-model 명령을 사용할 수 있습니다. 양방향 데이터 바인딩을 생성하려면 요소를 v-model은 본질적으로 구문 설탕입니다. 데이터를 업데이트하기 위해 사용자 입력 이벤트를 수신하고 일부 극단적인 시나리오에 대해 일부 특수 처리를 수행하는 역할을 담당합니다. v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用
value属性和input事件；checkbox 和 radio 使用
checked属性和change事件；select 字段将
value作为 prop 并将change🎜
🎜v-model은 모든 양식 요소의value,checked,selected속성을 무시합니다. 초기값은 항상 Vue 인스턴스의 데이터를 데이터 소스로 사용합니다. 구성 요소의data옵션에서 JavaScript를 통해 초기 값을 선언해야 합니다. 🎜v-model은 내부적으로 다양한 속성을 사용하고 다양한 입력 요소에 대해 다양한 이벤트를 발생시킵니다. 🎜🎜🎜🎜text 및 textarea 요소는value속성 및입력 이벤트; 🎜🎜🎜🎜체크박스와 라디오는 checked속성을 사용하고 🎜🎜🎜🎜선택 필드는값입니다. code>를 prop으로,change를 이벤트로 사용하세요. 🎜
입력 방법을 사용해야 하는 언어(예: 중국어, 일본어, 한국어 등)의 경우
v-model이 업데이트되는 동안 업데이트되지 않습니다. 텍스트를 결합하는 입력 방법입니다. 이 프로세스도 처리하려면input이벤트를 사용하세요.v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。
文本
<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>{{text}}</textarea>) 并不会生效，应用v-model来代替。
复选框
单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框，绑定到同一个数组：
<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>new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
<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>new Vue({
el: '#example-4',
data: {
picked: ''
}
})
选择框
单选时：
<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>new Vue({
el: '...',
data: {
selected: ''
}
})
如果
v-model表达式的初始值未能匹配任何选项，<select>元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
多选时 (绑定到一个数组)：
<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>new Vue({
el: '#example-6',
data: {
selected: []
}
})
用 v-for
텍스트
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
여러 줄 텍스트🎜
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})🎜
🎜🎜🎜텍스트 영역의 보간(<textarea>{{text}}< / textarea>)가 적용되지 않습니다. 대신 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>🎜
🎜🎜 동일한 배열에 바인딩된 여러 확인란: 🎜<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" >
// 当选中时 vm.toggle === 'yes' // 当没有选中时 vm.toggle === 'no'🎜
🎜🎜🎜🎜<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时 vm.pick === vm.a🎜
🎜🎜🎜🎜< p id="selection">선택 상자🎜🎜단일 선택 시: 🎜<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>rrree🎜
🎜🎜 🎜v의 초기값이 -model 표현식이 어떤 옵션과도 일치하지 않으면 <select> 요소가 "선택 취소됨" 상태로 렌더링됩니다. iOS에서는 이로 인해 사용자가 첫 번째 옵션을 선택할 수 없습니다. 이 경우 iOS는 변경 이벤트를 트리거하지 않습니다. 따라서 위와 같이 비활성화된 옵션을 빈 값으로 제공하는 것이 더 좋습니다. 🎜🎜다중 선택(배열에 바인딩): 🎜// 当选中时 typeof vm.selected // => 'object' vm.selected.number // => 123
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >🎜
🎜🎜v-for를 사용한 렌더링을 위한 동적 옵션: 🎜<input v-model.number="age" type="number">
<input v-model.trim="msg">🎜🎜🎜🎜🎜🎜
값 바인딩
라디오 버튼, 체크 상자 및 선택 상자 옵션의 경우 v-model에 의해 바인딩된 값은 일반적으로 정적 문자열입니다(체크 상자의 경우에도). 부울 값): v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
复选框
rrreeerrreee这里的
true-value和false-value特性并不会影响输入控件的value特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。
选择框的选项
修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
在组件上使用 v-modelrrreee그러나 때로는 Vue 인스턴스의 동적 속성에 값을 바인딩하고 싶을 수도 있습니다. 이 경우 v-bind를 사용하여 이를 달성할 수 있습니다. 이 속성은 문자열이 아닐 수 있습니다.
rrreeerrreeecheckbox
🎜참값 및 false-value 속성은 입력 컨트롤의 value 속성에 영향을 주지 않습니다. 양식을 제출할 때 브라우저가 선택되지 않은 확인란을 포함하지 않기 때문입니다. 양식에 있는 두 값 중 하나(예: "예" 또는 "아니요")가 제출되도록 하려면 라디오 버튼을 대신 사용하세요. 🎜
🎜
