選擇框

單選時：

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

請選擇?A?B?C?Selected: C

如果?v-model?表達(dá)式的初始值未能匹配任何選項(xiàng)，<select>?元素將被渲染為“未選中”狀態(tài)。在 iOS 中，這會使用戶無法選擇第一個選項(xiàng)。因?yàn)檫@樣的情況下，iOS 不會觸發(fā) change 事件。因此，更推薦像上面這樣提供一個值為空的禁用選項(xiàng)。

多選時 (綁定到一個數(shù)組)：

<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: []} })

A?B?C
Selected: []

用?v-for?渲染的動態(tài)選項(xiàng)：

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

?? ?? ?One? ? ??? ?? ?Two? ? ??? ?? ?Three? ? ??Selected: A

總結(jié)

以上是生活随笔為你收集整理的VUE选择框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。