Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs checkbox

Related course:
Fullstack Vue: The Complete Guide to Vue.js

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 }}

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

← vuejs click vuejs created →


© vuejsexamples.net - Privacy Policy - Cookie Policy