Divpusēja datu saistīšana ar ievades laukiem Vue

Tagad mēs iemācīsimies strādāt ar ievades laukiem Vue framewokā. Ar to palīdzību mēs reaktīvi pievienosim datus lapā. Sāksim. Pieņemsim, ka mums ir ievades lauks:

<template>
	<input>
</template>

Pieņemsim, ka mums ir arī īpašība message:

data() {
	return {
		message: 'hello',
	}
}

Mēs varam saistīt šo īpašību un ievades lauku tā, lai jebkura no tiem izmaiņas izraisītu otra mainīšanos. Tas tiek darīts ar direktīvas v-model palīdzību, kurā tiek norādīta īpašība, kas saistīta ar ievades lauku.

Piesēdināsim mūsu ievades laukam īpašību message:

<template>
	<input v-model="message">
</template>

Pēc koda palaišanas ievades laukā būs teksta īpašības message vērtība. Un, ja rediģēsiet datus ievades laukā - īpašība arī mainīsies atbilstoši. Lai to redzētu, izvadīsim ievadīto ievades lauka saturu kaut kur rindkopā:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Dots ievades lauks. Izveidojiet tā, lai ievadītais ievades laukā teksts uzreiz tiktu parādīts zem tā esošajā rindkopā.

Modificējiet iepriekšējo uzdevumu tā, lai teksts tiktu rādīts augšējā reģistrā.

Dots ievades lauks. Pieņemsim, ka tajā tiek ievadīts skaitlis. Izveidojiet tā, lai rindkopā tiktu parādīts ievadītā skaitļa kvadrāts.