Skip to content

Commit cb82714

Browse files
cascaniocascanio
committed
html com v-on e v-if
0 parents commit cb82714

File tree

1 file changed

+69
-0
lines changed

1 file changed

+69
-0
lines changed

‎index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Aplicação Vue.js</title>
9+
10+
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
11+
12+
<link rel="stylesheet" href="assets/css/style.css">
13+
14+
<link rel="preconnect" href="https://fonts.googleapis.com">
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap"
17+
rel="stylesheet">
18+
</head>
19+
20+
<body>
21+
<header>
22+
<h1 class="titulo-header">
23+
Criptografando e descriptografando um texto
24+
</h1>
25+
</header>
26+
27+
<main id="main">
28+
<section class="formularios">
29+
<div class="form-box">
30+
<img src="assets/imgs/locked-padlock.png">
31+
<h2 class="titulo">Criptografar</h2>
32+
<p class="subtitulo">Digite o texto para criptografar</p>
33+
34+
<form v-on:submit.prevent="criptografar">
35+
<!-- v-model associa os inputs às propriedades txtParaCripto -->
36+
<input type="text" v-model="txtParaCripto" placeholder="Digite o texto">
37+
38+
<input type="submit" value="Criptografar">
39+
</form>
40+
</div>
41+
42+
<div class="form-box">
43+
<img src="assets/imgs/padlock.png">
44+
<h2 class="titulo">Descriptografar</h2>
45+
<p class="subtitulo">Digite o texto para descriptografar</p>
46+
47+
<form v-on:submit.prevent="descriptografar">
48+
<!-- v-model associa os inputs às propriedades txtParaDescripto -->
49+
<input type="text" v-model="txtParaDescripto" placeholder="Digite o texto">
50+
51+
<input type="submit" value="Descriptografar">
52+
</form>
53+
</div>
54+
</section>
55+
56+
<section class="box-mensagem" v-if="resultadoTexto.length > 0">
57+
<h4 class="subtitulo">{{ resultadoTitulo }}</h4>
58+
<h3>{{ resultadoTexto }}</h3>
59+
60+
</section>
61+
62+
<section class=box-mensagem v-if="msgErro.length > 0">
63+
<h3 class="titulo-erro">{{ msgErro }}</h3>
64+
</section>
65+
</main>
66+
67+
<script src="script.js"></script>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)