Vue 2 - 选择用布尔值选择的集合

Question

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

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完成的。假设您只是想初始化它并使用v-model来进行其他绑定，您也可以使用:value="country.show"。

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公司。