如何綁定vuejs中的類？

Question

我嘗試使用v-bind綁定更多類：類我有單選按鈕，我想從bootstrap中提供一些類，如此處於活動狀態時。我知道我不會讓班級成功。

<div id="app"> 


     <div class="btn-group" data-toggle="buttons"> 
         <label :class="{'btn', 'btn-warning', 'active: radio === 1'}"> 
          <input v-model="removelines" type="radio" autocomplete="off" v-bind:value="yes" v-on:click="radio = 1"> 
          yes 
         </label> 

         <label :class="{'btn', 'btn-warning', 'active: radio === 2'}"> 
          <input v-model="removelines" type="radio" v-bind:value="no" v-on:click="radio = 2"> 
          no 
         </label> 
        </div> 

</div> 

和

new Vue{(
    el:'#app', 
    data:{ 
    radio: 1 
    } 

)}; 

Answer 1

有幾個問題與您的代碼。請注意，您可以設置不以正常方式更改的類，並且只將:class（v-bind:class的縮寫）與更改的類相關聯。 value也可以在不使用:value表單的情況下完成。

您需要一個removelines變量爲您的v-model。

new Vue({ 
 
    el:'#app', 
 
    data:{ 
 
    radio: 1, 
 
    removelines: 'no' 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 

 
    <div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-warning" :class="{active: radio === 1}"> 
 
     <input v-model="removelines" type="radio" autocomplete="off" value="yes" v-on:click="radio = 1"> yes 
 
    </label> 
 

 
    <label class="btn btn-warning" :class="{active: radio === 2}"> 
 
     <input v-model="removelines" type="radio" value="no" v-on:click="radio = 2"> no 
 
    </label> 
 
    </div> 
 
    <p>Radio is: {{radio}}</p> 
 
    <p>Removelines is: {{removelines}}</p> 
 

 
</div>