Dynamic style binding

Vuejs v-bind

by Nihar Raote

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div :class="{red: colorRed, green: !colorRed}" id="block">
    Some content
  </div>
</div>

CSS

#block {
  width: 100px;
  height: 100px;
  color: white;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

Vue

const App = {
	data() {
  	return {
    	colorRed: true
    }
  }
}

Vue.createApp(App).mount('#app')