How to Bind Styles and Classes in Vue.js

Dynamic Styling with Vue.js


Creating dynamic styles in Vue.js is super easy. By retrieving data from the Vue object you can set inline styles or even toggle a class depending on multiple states defined in your data.


Class Binding

First let's take a look at a basic class binding example. Let's say we have a button that we want to show only if 'showButton' is true. Like in our v-if post, we could simply add an inline attribute of v-if="showButton". But this time, let's toggle only the visibility via a class called "hide."


<button v-bind:class="{ hide: !showButton }"></button>


Here is our javascript:


var vm = new Vue({

    data: { showButton: true }

})



Since 'showButton' is set to true, the hide class will appear as a class on the DOM element and would render like this.


<button>Click Me</button>


If you were to change your code to the following:


var vm = new Vue({

    data: { showButton: false }

})


The following would render instead:


<button class="hide">Click Me</button>
Binding Styles


Binding styles is just as easy and works very similar.


Take this example. Say we want to show an input as red if the input is bad.

<input v-bind:style="{ color: inputColor }">

Usually, we'd evaluate the value of the input, and output a string which would be "red" in this case if the input was invalid. For this example, we'll simply just declare "inputColor" as "red."


var vm = new Vue({

    data: { inputColor: 'red' }

})


The input should render as follows in the DOM.


<input style="color: red">




Comments

Post a Comment

Popular posts from this blog

Vue Broadcasting (Part 1)

Broadcast across all Vue instances Vue comes with the very handy feature of broadcasting events through the   $on   and  $emit  instance methods. Generally this is used to communicate between parent and child components. However, often times developers will attach an instance to the global  window  object to be able to communicate across all Vue instances. This is a great convenience but let's create a more scoped and portable solution by simply creating an exported VueEvent class: class VueEvent {     /**      * Event broadcaster class constructor.      *      * @constructor      */     constructor () {         this.vue = new Vue();     }     /**      * This will emit a broadcast that can be utlized by an active Event listener.      *      *...
Read more

Vue.js: Automatically Import Components

Automatically import all single file components during Webpack 2 bootstrap   Many developers using Webpack and utilizing Vue's Singe File Components load each component manually, one-by-one within an app or bootstrap file. However, Webpack comes with configuration options that can automate this process by instantiating the Vue component to match the file name. Let's take a look at our simple Webpack config function that can be used to automatically require our components. // Require and instantiate our components function requireAllComponents(requireContext) {     let keys = requireContext.keys();     return requireContext.keys().map(key => {         let pathMap = key.split('/'),             label = pathMap[pathMap.length - 1].slice(0, -4).replace(/([A-Z])/g, '-$1').slice(1).toLowerCase();         Vue.component(label, requireContext(key));     }); } N...
Read more

Vue.js vs Angular 1.0 (Part 2)

Which is better Vue.js or Angular 1.0 (Part 1)? Let's take a basic look at Vue.js vs. Angular: Components and Directives One of the biggest complaints from users of Angular 1.0 was the muddy nature of service providers and when to use which for what. Services, Factories, Providers, Directives, Components - there never seemed to be a clear, concise answer on how they should be used. With Vue, you have components and directives. With Vue there are components and directives, and the dilineation is very clear. WINNER:  Vue.js Community Support While Angular used to be the hottest framework around, it slowly started fizzling out as talks of Angular 2.0 came around, and React entered the scene. Many of the popular libraries are no longer updated and Vue seems to be taking its place. WINNER:  Vue.js Speed and Performance In benchmark tests, Vue outperforms Angular 1.0. With all the dirty checking and constant watchers, your Angular application will...
Read more