---

下拉列表select

下拉列表由一个 <select> 标签和其内的 <option> 标签组成。

在 Vue 中使用下拉列表时，我们需要将 <select> 标签与 v-model 连接起来，并为 <option> 标签赋值：

示例
App.vue：

<template>
<h1>Vue 中的下拉列表</h1>
<form @submit.prevent="registerAnswer">
<label for="cars">选择汽车：</label>
<select v-model="carSelected" id="cars">
<option disabled value="">请选择一个</option>
<option>Volvo</option>
<option>Saab</option>
<option>Opel</option>
<option>Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<div>
<h3>已提交答案：</h3>
<p id="pAnswer">{
   
   { inpValSubmitted }></p>
</div>
</template>

<script>
export default {
      
      
data() {
      
      
return {
      
      
carSelected: '',
inpValSubmitted: '尚未提交'
}
},
methods: {
      
      
registerAnswer() {
      
      
if(this.carSelected) {
      
      
this.inpValSubmitted = this.carSelected;
}
}
}
}
</script>

<style scoped>
  div {
      
      
    border: dashed black 1px;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    margin-top: 20px;
    display: inline-block;
  }
  button {
      
      
    margin: 10px;
  }
  label {
      
      
    width: 80px;
    padding: 5px;
  }
  label:hover {
      
      
    cursor: pointer;
    background-color: rgb(211, 244, 211);
    border-radius: 5px;
  }
  #pAnswer {
      
      
    background-color: lightgreen;
    padding: 5px;
  }
</style>

---

总结

本文介绍了Vue Form表单-下拉列表select的使用，如有问题欢迎私信和评论