Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs checkbox

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

A checkbox can be linked directly to a variable in your Vue instance.

This is two-way: it can make your app interactive if you want.

If you click on the checkbox, it changes the value in the Vue instance.
The variable also changes in your template.

checkbox example

Create a html template. Inside the template create your app in a div.
Then define the checkbox and link the model with v-model.

<div id="app">
Checkbox: <input type="checkbox" v-model="x"></input>
{{ x }}
</div>

In your Vue instance, create the variable you defined in v-model previously.

new Vue({
el: '#app',
data: {
x: ""
},
methods: {
}
});

Once you load it, it will show the value of the variable depending on the checkbox state.

vuejs checkbox

Download Vue.js Examples


← vuejs click vuejs created →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy