0 Tage Serie
javascript / beginner
Snippet

Zwei-Wege-Bindung mit v-model

Die v-model-Direktive erstellt eine Zwei-Wege-Verbindung zwischen einem Eingabefeld und einer Datenvariablen. Das Tippen im Feld aktualisiert die Variable sofort.

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
Erklärung
1
v-model="username"
Verknüpft den Eingabewert bidirektional mit der Variable 'username'.
2
{{ username }}
Zeigt den aktuellen Wert der Variable im Template an.