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

Question

这可能是微不足道的，但我无法在 Vue.js 模板中创建一个选择框来显示 US默认情况下(即在单击下拉菜单之前)

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

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

我该如何解决？

Answer 1

见 Form Input Bindings - Select .你只需要设置你的界限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>