Wie binden Sie Klassen in Vuejs?

Question

Ich versuche, mehr Klassen mit v-bind zu binden: Klasse Ich habe Radio-Buttons, die ich einige Klassen von Bootstrap geben möchte, wenn es so aktiv ist. Ich weiß, dass ich die Klassen nicht erfolgreich mache.

<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> 

und

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

)}; 

Answer 1

Es gibt mehrere Probleme mit Ihrem Code. Beachten Sie, dass Sie die Klassen, die sich nicht auf die normale Weise ändern, festlegen und nur die :class (die für v-bind:class kurz ist) mit der Klasse ändern. value kann auch ohne Verwendung der :value Form durchgeführt werden.

Sie benötigten eine removelines Variable für Ihre 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>