Upataji wa Data za Fomu Kulingana na Tukio katika Vue

Hebu tuchukulie tuna kitufe na kiingilio, ambacho nambari inaingizwa. Hebu kwa kubofya kitufe tuonye mraba wa nambari iliyoingizwa kwenye kiingilio. Tuanze utekelezaji.

Ili kutatua tatizo, tutahitaji sifa mbili. Sifa num (itakabadilika kadiri data inavyoingizwa kwenye kiingilio, na kwenye sifa res tutaandika matokeo ya kuinua kwa mraba:

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

Hebu sasa tufanye kiingilio, tuliunge kwa sifa num, tufanye kitufe, kwa kubofya ambayo mbinu calc itatekelezwa, na pia tufanye aya, ambayo matokeo yataonyeshwa:

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

Hebu tuandike utekelezaji wa mbinu calc:

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

Itatokea kuwa mara tu mbinu calc itakapoitwa (na hii itatokea kwa kubofya kitufe), kwenye sifa res kitaandikwa matokeo na wakati huo huo yataonyeshwa katika aya yetu.

Kipewa kiingilio. Kipewa kitufe. Kipewa aya. Kwenye kiingilio nambari inaingizwa. Fanya hivi, ili kwa kubofya kitufe aya ionyeshe mzizi wa mraba wa nambari hiyo.

Kipewa viingilio viwili. Kipewa kitufe. Kipewa aya. Kwenye kila kiingilio nambari zinaingizwa. Fanya hivi, ili kwa kubofya kitufe aya ionyeshe jumla ya nambari hizi.

Kipewa viingilio viwili. Kipewa kitufe. Kwenye kila kiingilio maandishi yanaingizwa. Fanya hivi, ili kwa kubofya kitufe maandishi ya kiingilio cha kwanza yawe kwenye cha pili na kinyume chake.

Kipewa kiingilio, 3 aya na kitufe. Kwenye kiingilio Jina Kamili la mtumiaji inaingizwa kwa nafasi. Fanya hivi, ili kwa kubofya kitufe kwenye aya ya kwanza ionyeshe jina la ukoo la mtumiaji, kwenye ya pili - jina la kwanza, na kwenye ya tatu - jina la kati.