dynamic CSS Classes

by Tuan Truong

HTML

<div id="app">
  <h1>Dynamic CSS</h1>
  <h2>Example 1</h2>
  
  <div @click="available = !available" :class="{ available : available }">
    <span>Ryu</span>
  </div>
  
  <h2>Example 2</h2>
  
  <button @click="nearby = !nearby">Toggle Nearby</button>
    <button @click="available = !available">Toggle available</button>
  <div :class="compClasses">
    <span>Ryu</span>
  </div>
</div>

CSS

span {
  background: red;
  display: inline-block;
  padding: 10px;
  color: #fff;
  margin: 10px 0;
}

.available span {
  background: green;
}

.nearby span:after {
  content: "nearby";
  margin-left: 10px;
}

Vue

new Vue({
	el: '#app',
  data: {
  	available: false,
    nearby: false
  },
  computed: {
  	compClasses(){
    	return {
      	available: this.available,
        nearby: this.nearby
      }
    }
  }
})