Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs class

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

You can bind data to a class. This allows you to toggle a class dynamically.
You can use v-bind:class to bind a variable to a class.

If you have a variable, isActive, you would have this template:

<div v-bind:class="{ active: isActive }">
Class example
</div>

vuejs class example

The example below will load the stylesheet class if the apps variable is set to true.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>//vuejsexamples.net</title>
<!-- include vue -->
<script src="//unpkg.com/vue"></script>
<style>
.active {
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ active: isActive }">
Class example {{ isActive }}
</div>
</div>
</body>
<script src="app.js"></script>
</html>

In your Vue Instance add the variable:

new Vue({
el: '#app',
data: {
isActive: true
},
methods: {
}
});

Download Vue.js Examples


← vuejs components vuejs dropdown →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy