ფორმის მონაცემების მიღება მოვლენის მიხედვით Vue-ში

დავუშვათ, გვაქვს ღილაკი და input ველი, რომელშიც შედის რიცხვი. დავაწკაპუნოთ ღილაკს და გამოვიტანოთ input ველში შეყვანილი რიცხვის კვადრატი. მოდით, დავიწყოთ რეალიზაცია.

ამოცანის ამოსახსნელად დაგვჭირდება ორი თვისება. თვისება num შეიცვლება მონაცემების input ველში შეყვანისას, ხოლო თვისებაში res ჩავწერთ კვადრატში აყვანის შედეგს:

data() {
	return {
		num: 0,
		res: 0
	}
}

მოდით, ახლა გავაკეთოთ input ველი, დავუკავშიროთ მას თვისება num, გავაკეთოთ ღილაკი, რომელზე დაწკაპუნებით შესრულდება მეთოდი calc და ასევე გავაკეთოთ აბზაცი, რომელშიც გამოისახება შედეგი:

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">work</button>
</template>

მოდით, დავწეროთ მეთოდის calc რეალიზაცია:

methods: {
	calc: function() {
		this.res = this.num ** 2;
	}
}

გამოვა ის, რომ როგორც კი გამოიძახება მეთოდი calc (და ეს მოხდება ღილაკზე დაწკაპუნებისას), თვისებაში res ჩაიწერება შედეგი და ამასთან ერთად გამოისახება ჩვენს აბზაცში.

მოცემულია input ველი. მოცემულია ღილაკი. მოცემულია აბზაცი. input ველში შედის რიცხვი. გახსენით ისე, რომ ღილაკზე დაწკაპუნებისას აბზაცში გამოჩნდეს ამ რიცხვის კვადრატული ფესვი.

მოცემულია ორი input ველი. მოცემულია ღილაკი. მოცემულია აბზაცი. თითოეულ input ველში შედის რიცხვი. გახსენით ისე, რომ ღილაკზე დაწკაპუნებისას აბზაცში გამოჩნდეს ამ რიცხვების ჯამი.

მოცემულია ორი input ველი. მოცემულია ღილაკი. თითოეულ input ველში შედის რაღაც ტექსტი. გახსენით ისე, რომ ღილაკზე დაწკაპუნებისას პირველი input ველის ტექსტი გახდეს მეორეში და პირიქით.

მოცემულია input ველი, 3 აბზაცი და ღილაკი. input ველში შედის მომხმარებლის სრული სახელი, გვარი, მამის სახელი (ფსბ) სფესებით გამოყოფილი. გახსენით ისე, რომ ღილაკზე დაწკაპუნებისას პირველ აბზაცში გამოჩნდეს მომხმარებლის გვარი, მეორეში - სახელი, ხოლო მესამეში - მამის სახელი.