v-model在select和option、el-select和el-option中的使用。（vue使用el-select和el-option实现搜索框）(默认选择数组前四个数据）

本文链接：https://blog.csdn.net/qq_56715703/article/details/131534669

v-model用于在HTML表单的<input>,<textarea>,<select>元素上创建双向数据绑定。它根据控件类型自动处理value或checked属性和对应的input或change事件。对于单选和多选select，v-model会根据选定option的值更新。在多选时，绑定到一个数组。动态选项可以通过v-for渲染，并且v-bind允许绑定非字符串值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-model：在表单<input><textarea><select>元素上创建双向数据绑定。会根据控件类型自动选取正确的方法来更新元素。本质是语法糖，负责监听用户的输入事件以更新数据。

特点：总是将vue实例的数据作为数据来源—>data中声明的值

text和textarea元素使用value property 和 input事件
checkbox和radio 使用checked property和change事件
select字段将value作为prop并将change作为事件

选择框：

（1）单选

<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: ''
  }
})

其selected的值会根据选择的option的值来变。

单选时，如果v-model表达式的初始值未能匹配任何选项，select元素将被渲染为“未选中”状态。在ios中，会使用户无法选择第一个选项，因为在这样的情况下，ios不会触发change事件。因此，推荐提供一个值为空的禁用选项。

（2）多选时，绑定到一个数组：

<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' }
    ]
  }
})

v-bind可以把值绑定到Vue实例的一个动态property上，其值可以不是字符串。

<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: ['需求收集', '设计阶段', '开发阶段', '测试阶段', '准备上线', '上线运营', '对账归账'],
    }
}