如何在Vue.js中的选择框中设置默认值？

Question

这可能很简单，但我无法在 Vue.js 模板中创建一个选择框以US默认显示（即在单击下拉菜单之前）

<select v-model="country">                                           
    <option selected="selected">US</option>
    <option>UK</option>
    <option>EU</option>
</select>

问题是，无论我尝试什么，选择器在被单击之前都显示为空白。

我该如何修复它？

Answer 1

请参阅表单输入绑定 - 选择。您只需将绑定v-model属性设置为适当的值即可。

这是一个例子...

new Vue({
  el: '#app',
  data: {
    country: 'US'
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <select v-model="country">
    <!-- as recommended by Vue -->
    <option disabled value="">Please select one</option>
    <option>US</option>
    <option>UK</option>
    <option>EU</option>
  </select>
  
  <pre>Selected country: {{ country }}</pre>
</div>