v-model ਦੋ-ਤਰਫਾ ਬਾਈਂਡਿੰਗ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਦਾ ਹੈ?

v-model ਇੱਕ ਫਾਰਮ ਇਨਪੁਟ ਅਤੇ ਸਟੇਟ ਦੇ ਇੱਕ ਟੁਕੜੇ ਵਿਚਕਾਰ ਦੋ-ਤਰਫਾ ਬਾਈਂਡਿੰਗ ਬਣਾਉਂਦਾ ਹੈ: ਇਨਪੁਟ ਸਟੇਟ ਦੀ ਵੈਲਯੂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਅਤੇ ਇਨਪੁਟ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨਾ ਸਟੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ — ਸਵਚਾਲਿਤ ਰੂਪ ਵਿੱਚ, ਦੋਨਾਂ ਦਿਸ਼ਾਵਾਂ ਵਿਚ।

vue

<script setup>
import { ref } from "vue";
const name = ref("");
</script>

<template>
  <input v-model="name" />
  <p>You typed: {{ name }}</p>   <!-- updates live as you type -->
</template>

ਇਹ syntactic sugar ਹੈ

ਪਰਦੇ ਦੇ ਪਿੱਛੇ, ਬਾਈਂਡ ਅਤੇ listener ਨੂੰ ਜੋੜਦਾ ਹੈ:

v-model

:value

@input

vue

<template>
  <input v-model="text" />                 <!-- text -->
  <textarea v-model="message" />
  <input type="checkbox" v-model="agreed" /> <!-- boolean -->
  <input type="radio" value="a" v-model="choice" />
  <select v-model="selected">...</select>
</template>

vue

<input v-model.trim="name" />    <!-- auto-trim whitespace -->
<input v-model.number="age" />   <!-- cast to a number -->
<input v-model.lazy="text" />    <!-- sync on `change` instead of every keystroke -->

vue

<!-- a component can support v-model via a `modelValue` prop + `update:modelValue` event -->
<CustomInput v-model="name" />
<!-- equivalent to :model-value="name" @update:model-value="name = $event" -->

v-model ਦੋ-ਤਰਫਾ ਬਾਈਂਡਿੰਗ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਦਾ ਹੈ?

ਇਹ syntactic sugar ਹੈ

ਸਾਰੇ form controls 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ

Modifiers

Custom components 'ਤੇ v-model

ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ