「短文」如何在 Vue 中使用 Select 下拉框表单组件

在 HTML 中，select 标记可让您创建一个下拉菜单，让用户选择多个选项之一。将 Vue 状态（ data state）绑定到 select 标记的值，最简单方法是使用 v-model。

<script src="https://unpkg.com/vue@next"></script>
<div style = "outline-style: solid" id="example">
  <select v-model="selected">
    <option disabled value="">Please Select</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span style="padding-left:5%">Your Choice is: {{selected}}</span>
</div>
<script>
Vue.createApp({
  data() {
    return {
      selected: ''
    };
  }
}).mount('#example');
</script>

注意：在 iOS 上，如果您的 v-model 的初始值与任何选项都不匹配，则会导致浏览器将 select 标记呈现为“未选择”状态。在 iOS 上运行的任何浏览器都不会为未选择标签中的 select 触发更改事件，这意味着用户将无法选择第一个选项。因此，我们建议使用一个空值作为第一个元素的禁用选项。

使用 v-for

使用 v-for，您可以为数组中的每个值创建一个选项，动态绑定带下拉框的选项中，示例代码如下：

<script src="https://unpkg.com/vue@next"></script>
<div style = "outline-style: solid" id="demo">
  <select v-model="selected">
    <option disabled value="">Please Select</option>
    <option v-for="option in options" :value="option">{{option}}</option>
  </select>
  <span style="padding-left:5%">Your Choice is: {{selected}}</span>
</div>
<script>
Vue.createApp({
  data() {
    return {
      selected: '',
      options: [
        'A',
        'B',
        'C'
      ]
    };
  }
}).mount('#demo');
</script>

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载