In this section, we're going to look at how we can dynamically toggle CSS classes within our Vue applications. We'll start off by investigating the v-bind directive and we'll see how this can be applied to both class and style attributes. This is great for conditionally applying styles based on a particular business logic. Let's create a new Vue project for this example:
# Create a new Vue project $ vue init webpack-simple vue-bind # Navigate to directory $ cd vue-bind # Install dependencies $ npm install # Run application $ npm run dev
Inside of our project, we can make checkboxes that represent the different states of our application. We'll start off with one named red. As you may be able to infer, by checking this we can turn a particular piece of text red in color and subsequently turn it black by unchecking it.
Create a data object named red with the value of false inside App.vue:
<script>
export default {
data () {
return {
red: false
}
}
}
</script>This...