javascript / beginner
Snippet
Two-Way Binding with v-model
The v-model directive creates a two-way connection between an input field and a data variable. Typing in the input updates the variable instantly.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<script setup>import { ref } from 'vue';const username = ref('');</script><template><input v-model="username" placeholder="Enter name" /><p>Hello, {{ username }}!</p></template>
vue
Breakdown
1
v-model="username"
Links the input value to the 'username' variable bi-directionally.
2
{{ username }}
Displays the current value of the variable in the template.