下拉框分為單選和多選兩種方式。

<div id="app"><select v-model="selected"><option value="讀書">讀書</option><option value="學習">學習</option><option value="運動">運動</option></select><p>選擇的項是：{{selected}}</p></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>new Vue({el:'#app',data:{selected:'學習'}}) </script>

<option>是備選項，如果含有value屬性，v-model就會優先匹配value的值；如果沒有，就會直接匹配<option>的text。

給<selected>添加屬性multiple就可以多選了，此時model綁定的是一個數組。

<div id="app"><select v-model="selected" multiple><option value="讀書">讀書</option><option value="學習">學習</option><option value="運動">運動</option></select><p>選擇的項是：{{selected}}</p></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>new Vue({el:'#app',data:{selected:['學習','讀書']}}) </script>

在業務中，<option>通常是使用v-for動態輸出，value和text也是用v-bind來動態輸出的,例如:

<div id="app"><select v-model="selected" ><option v-for="option in options" :value="option.value">{{option.text}}</option></select><p>選擇的項是：{{selected}}</p></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>new Vue({el:'#app',data:{selected:'學習',options:[{text:'學習',value:'學習'},{text:'讀書',value:'讀書'},{text:'運動',value:'運動'}]}}) </script>

?

總結

以上是生活随笔為你收集整理的Vue的表单组件之下拉框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。