We can add a checkbox control to a Vuejs app by adding a regular HTML checkbox control.
Then we can add the v-model
directive to it to bind the checked value to a model variable.
For instance, we can write the following:
App.vue
<template>
<div id="app">
<input type="checkbox" v-model="checkValue">checkbox
<p>{{checkValue}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
checkValue: false
};
}
};
</script>
In the code above, we added a checkbox to the model with the v-model
directive.
The directive binds the checked value to the checkValue
property.
We also have the p element below it to display the value.
Then when we click it, we toggle the checkValue
model’s value between true
and false
.