Vue에서 이벤트로 폼 데이터 가져오기

버튼과 숫자를 입력하는 입력 필드가 있다고 가정해 봅시다. 버튼을 클릭할 때 입력 필드에 입력된 숫자의 제곱을 출력해 봅시다. 구현을 시작해 보겠습니다.

문제를 해결하려면 두 개의 속성이 필요합니다. 속성 num은 입력 필드에 데이터를 입력할 때마다 변경되며, 속성 res에는 제곱한 결과를 기록할 것입니다:

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

이제 입력 필드를 만들고, 속성 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에 기록되고 동시에 우리의 단락에 출력됩니다.

입력 필드가 주어집니다. 버튼이 주어집니다. 단락이 주어집니다. 입력 필드에 숫자가 입력됩니다. 버튼을 클릭할 때 단락에 이 숫자의 제곱근이 나타나도록 만드세요.

두 개의 입력 필드가 주어집니다. 버튼이 주어집니다. 단락이 주어집니다. 각 입력 필드에 숫자가 입력됩니다. 버튼을 클릭할 때 단락에 이 숫자들의 합이 나타나도록 만드세요.

두 개의 입력 필드가 주어집니다. 버튼이 주어집니다. 각 입력 필드에 어떤 텍스트가 입력됩니다. 버튼을 클릭할 때 첫 번째 입력 필드의 텍스트가 두 번째에, 두 번째 입력 필드의 텍스트가 첫 번째에 나타나도록 만드세요.

입력 필드, 3개의 단락, 그리고 버튼이 주어집니다. 입력 필드에 사용자의 성명이 공백으로 구분되어 입력됩니다. 버튼을 클릭할 때 첫 번째 단락에 사용자의 성이, 두 번째 단락에 이름이, 세 번째 단락에 중간 이름이 나타나도록 만드세요.