Bewerben Sie eine Klasse mit: Klasse

Question

Ich sah bereits die docs, aber ich habe immer noch nicht herausgefunden, wie man das bei der Arbeit, am Anfang ich möchte nur eine bestimmte Klasse mit vue.js zeigen, die ich später ändern möchte dynamicly, i gesetzt möchte nur das Standardverhalten dieser Klasse, so dass ich etwas wie folgt aus:

html

<div class="row"> 
    <h1 class="text-center title">YOU</h1> 
    <div class="col-md-offset-1 col-md-10"> 
     <div :class="progressYou">asd</div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-offset-1 col-md-10"> 
     <div :class="progressMonster">asd</div> 
    </div> 
</div> 

css

.progressYou{ 
    width: '100px'; 
    background-color: 'green'; 
    height: '50px'; 
} 

.progressMonster{ 
    width: '100px'; 
    background-color: 'green'; 
    height: '50px'; 
} 

javascript

new Vue({ 
    el: '#monsterGame', 
    data: { 
     incrementMonster: 0, 
     incrementYou: 0, 
     progressMonster: { 
      'width': '100px', 
      'background-color': 'green', 
      'height': '50px' 
     }, 
     progressYou: { 
      'width': '100px', 
      'background-color': 'green', 
      'height': '50px' 
     } 

    } 
}) 

tun muss ich, dass in der CSS anhängen ?, ich will basicly eine Klasse auf meine CSS und dass dynamcly über die Objekte ändern, die ich auf die Daten in der Javascript-Seite erstellt, aber ich kann sehe nichts: S, was mache ich falsch?

Answer 1

Sie verwenden the v-bind:class directive, aber Ihre Argumente sind keine Klassennamen, sie sind Stilspezifikationen.

Auch Ihr CSS hat unnötige Anführungszeichen.

new Vue({ 
 
    el: '#monsterGame', 
 
    data: { 
 
    incrementMonster: 0, 
 
    incrementYou: 0, 
 
    className: 'progressMonster' 
 
    }, 
 
    methods: { 
 
    toggleClass: function() { 
 
     this.className = this.className === 'progressMonster' ? 'progressYou' : 'progressMonster'; 
 
    } 
 
    } 
 
})

.progressYou { 
 
    width: 100px; 
 
    color: white; 
 
    background-color: green; 
 
    height: 50px; 
 
} 
 

 
.progressMonster { 
 
    color: black; 
 
    width: 100px; 
 
    background-color: lightblue; 
 
    height: 50px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script> 
 
<div id="monsterGame"> 
 
    <div class="row"> 
 
    <h1 class="text-center title">YOU</h1> 
 
    <div class="col-md-offset-1 col-md-10"> 
 
     <div :class="[className]">asd</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-offset-1 col-md-10"> 
 
     <div :class="[className]">asd</div> 
 
    </div> 
 
    </div> 
 
    <button @click="toggleClass">Switch</button> 
 
    
 
    
 
</div>