EN
Vue.js - what is v-model?
1
answers
0
points
What is v-model in Vue.js?
For example, I have a code similar to this:
<template>
<div>
<input type="text" v-model="username" />
<input type="password" v-model="password" />
</div>
</template>
and I don't really understand what does v-model change in the input element.
1 answer
0
points
The v-model is a two-way data binding directive which developers use to construct a binding between a form input element and a data property. It's a shorthand syntax for binding data to form elements and updating the data property when the user interacts with the form element.
Practical example
Let's say, you have an input element and a data property called "username" like in your code.
You can use v-model to bind the value of the input element to the "username" property. The "username" property's value will be automatically updated each time the user enters text into the input field.
app.vue file:
<template>
<div>
<input type="text" v-model="username" />
<p>Username input value: {{ username }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const username = ref('');
</script>
Result:
0 comments
Add comment