Day: January 9, 2018

Binding to Class attribute in Vue.js

There are several ways you can bind to CSS class. We will see them one by one Object Syntax You can bind css class using {}. You just to put the name of the css class.

If IsActive is true it will apply the redbox CSS class to Div element

Read more

Binding to Style attribute in Vue.js

I have the following Div element and I am going to change the font size using data object

This is the Vue instance and you have the font_size data object

We will see another style binding example where you can create data object and assign it to the style attribute

You […]

Read more

Event handling in Vue.js

When a button is clicked I want to show a message. You can use v-on directive in Vue.js for event handling

You can us the @ symbol without using the v-on directive

Read more

IF – Else statement in Vue.js

Let’s try to understand how to write IF-Else statement in Vue js. You have v-if,v-else-if,v-else This is your Vue instance for this example

You can use v-show directive to display HTML element if some condition is true. I need to show message when user select more then one check box “You have selected multiple […]

Read more

Write For Loop in Vue.js

You can use the v-for directive to write For Loop in Vue.js I am going to generate checkbox fields to select days with following code. I have used v-for directive to make the for loop

This is the Vue.js code with days array which will hold the days of the week

You can […]

Read more

Two-way data binding in Vue.js

What is two-way data binding in Vue.js? You can update dom with your Vue instance also when you update DOM you can get those updates to Vue Following example shows the one-way binding. Value of the email field is updated by the email data property of the Vue instance. But, when the user types in […]

Read more