v-model: Create two-way data binding on form <input><textarea><select> elements. The correct method to update the element is automatically chosen based on the control type. The essence is syntactic sugar, which is responsible for listening to user input events to update data.
Features: Always use the data of the vue instance as the data source -> the value declared in data
- The text and textarea elements use the value property and input events
- checkbox and radio use checked property and change event
- The select field takes value as prop and change as event
Selection box:
(1) single choice
<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: ''
}
})Its selected value will change according to the value of the selected option.
When single-selecting, if the initial value of the v-model expression fails to match any option, the select element will be rendered as "unselected". In ios, it will make the user unable to select the first option, because in this case, ios will not fire the change event. Therefore, it is recommended to provide a disabled option with an empty value.
(2) When multiple selection, bind to an array:
<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 Dynamic options for rendering with
<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' }
]
}
})v-bind can bind the value to a dynamic property of the Vue instance, and its value can not be a string.
<el-select v-model="needStatus" placeholder="请选择表单状态" style="width: 180px" multiple collapse-tags clearable>
<el-option v-for="(item, index) in statusText" :key="item" :label="item" :value="index"></el-option>
</el-select>data(){
return{
needStatus: [0,1,2,3,4],
statusText: ['需求收集', '设计阶段', '开发阶段', '测试阶段', '准备上线', '上线运营', '对账归账'],
}
}