Obtendo dados de formulário por evento em Vue
Suponha que temos um botão e um campo de entrada onde um número é digitado. Vamos, ao clicar no botão, exibir o quadrado do número inserido no campo. Vamos começar a implementação.
Para resolver esta tarefa, precisaremos de
duas propriedades. A propriedade num
será alterada à medida em que os dados são
inseridos no campo, e na propriedade
res registraremos
o resultado da elevação ao quadrado:
data() {
return {
num: 0,
res: 0
}
}
Agora, vamos criar o campo de entrada, vincular
a ele a propriedade num, criar um botão
que, ao ser clicado, executará o método
calc, e também criar um parágrafo onde
o resultado será exibido:
<template>
<p>{{ res }}</p>
<input v-model="num">
<button v-on:click="calc">work</button>
</template>
Vamos escrever a implementação do método calc:
methods: {
calc: function() {
this.res = this.num ** 2;
}
}
O resultado será que, assim que o método
calc for chamado (o que acontecerá ao pressionar
o botão), a propriedade res será preenchida com
o resultado e, simultaneamente, será exibida
em nosso parágrafo.
Dado um campo de entrada. Dado um botão. Dado um parágrafo. Um número é inserido no campo. Faça com que, ao clicar no botão, apareça no parágrafo a raiz quadrada desse número.
Dados dois campos de entrada. Dado um botão. Dado um parágrafo. Números são inseridos em cada campo. Faça com que, ao clicar no botão, apareça no parágrafo a soma desses números.
Dados dois campos de entrada. Dado um botão. Em cada campo é inserido algum texto. Faça com que, ao clicar no botão, o texto do primeiro campo fique no segundo e vice-versa.
Dado um campo de entrada, 3 parágrafos e um botão. No campo
é inserido o Nome Completo do usuário separado por espaços. Faça
com que, ao clicar no botão, no primeiro
parágrafo apareça o sobrenome do usuário, no
segundo - o nome, e no terceiro - o patronímico.
