vuejsでクラスをバインドする方法は？

Question

私はv-bindでより多くのクラスをバインドしようとしています：class私はラジオボタンを持っています。私はクラスを成功させることはないと知っています。

<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

あなたのコードにはいくつかの問題があります。通常の方法で変更されないクラスを設定し、変更するクラスに（v-bind:classの略）のみを関連付けることができます。 valueは、:valueフォームを使用せずに行うこともできます。

v-modelの変数はremovelinesでした。

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>