Двонасочна врска на податоци со инпути во Vue

Сега ќе научиме како да работиме со инпути во Vue рамката. Со нивна помош ќе реактивно додаваме податоци на страницата. Да почнеме. Нека имаме инпут:

<template>
	<input>
</template>

Нека исто така имаме својство message:

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

Можеме да го поврземе ова својство и инпутот на таков начин што промената на било кое од нив ќе доведе до промена на другото. Ова се прави со директивата v-model, во која се наведува својството поврзано со инпутот.

Ајде да го поврземе својството message со нашиот инпут:

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

По стартувањето на кодот, во инпутот ќе се наоѓа текстот од својството message. А ако се изменат податоците во инпутот - својството исто така ќе се промени соодветно. За да го видите ова, ајде да го прикажеме содржината внесена во инпутот некаде во еден абзац:

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

Даден е инпут. Направете така што текстот внесен во инпутот веднаш да се прикажува во абзацот под него.

Модифицирајте ја претходната задача така што текстот ќе се прикажува со големи букви.

Даден е инпут. Нека во него се внесува број. Направете така што во абзацот при внесувањето да се прикажува квадратот на внесениот број.