时间戳

首页 > 解决方案 > 如何在 Vue.js 的选择框中设置默认值？

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

问题描述

这可能是微不足道的，但我无法在 Vue.js 模板中创建一个选择框以显示US为默认值（即在单击下拉列表之前）

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

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

我该如何解决？

标签： htmlvue.js

解决方案

请参阅表单输入绑定 - 选择。您只需要将绑定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>

推荐阅读