vue.js - Vue 2 - 选择使用 bool 值选择的集合

Question

如何根据 bool 值设置选定的选项。

country.show 可以是 0 或 1，基于此，我想要预选选项。这是代码片段:

<td>
    <select name="show" class="form-control country-show">
        <option value="0" :selected="country.show == 0">No</option>
        <option value="1" :selected="country.show == 1">Yes</option>
    </select>
</td>

Answer 1

通常这是通过 v-model 完成的。您也可以使用 :value="country.show" 假设您只想初始化它并使用 v-model 进行其他绑定(bind)。

console.clear()

new Vue({
  el: "#app",
  data: {
    country: {
      show: 0
    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <div>
    <h2>Using v-model</h2>
    <select name="show" v-model="country.show">
    <option value="0">No</option>
    <option value="1">Yes</option>
  </select>
  </div>



  <div>
    <h2>Using :value</h2>
    <select name="show" class="form-control country-show" :value="country.show">
        <option value="0">No</option>
        <option value="1">Yes</option>
    </select
  </div>
  
    <div>
    <h2>Using code from your question</h2>
    <select name="show" class="form-control country-show">
        <option value="0" :selected="country.show == 0">No</option>
        <option value="1" :selected="country.show == 1">Yes</option>
    </select
  </div>
</div>

FWIW，您可以预先选择一个值，这不是您通常在 Vue 中执行的操作。