Skip to content

Commit 2cb8ba8

Browse files
author
Luiz Eduardo
committed
Criação do exercício 3 e adição de classes css dinamicamente
1 parent 96029df commit 2cb8ba8

File tree

5 files changed

+100
-0
lines changed

5 files changed

+100
-0
lines changed

‎css/exemplo8.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.demo {
2+
width: 100px;
3+
height: 100px;
4+
background-color: gray;
5+
display: inline-block;
6+
margin: 10px;
7+
}
8+
9+
.red {
10+
background-color: red;
11+
}
12+
13+
.green {
14+
background-color: green;
15+
}
16+
17+
.blue {
18+
background-color: blue;
19+
}

‎html/exemplo8.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>VueJS</title>
7+
<link rel="stylesheet" href="../css/exemplo8.css">
8+
</head>
9+
<body>
10+
<div id="app">
11+
<div class="demo"
12+
@click="attachRed = !attachRed"
13+
:class="{red: attachRed}"></div>
14+
15+
<div class="demo"
16+
@click="attachGreen = !attachGreen"
17+
:class="{green: attachGreen}"></div>
18+
19+
<div class="demo"
20+
@click="attachBlue = !attachBlue"
21+
:class="{blue: attachBlue}"></div>
22+
</div>
23+
24+
<script src="../js/vue.js"></script>
25+
<script src="../js/exemplo8.js"></script>
26+
</body>
27+
</html>

‎html/exercises3.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>VueJS - Exercises</title>
7+
<link rel="stylesheet" href="">
8+
</head>
9+
<body>
10+
<div id="exercise">
11+
<!-- 1) Show a "result" of 'not there yet' as long as "value" is not equal to 37 - you can change "value" with the buttons. Print 'done' once you did it -->
12+
<div>
13+
<p>Current Value: {{ value }}</p>
14+
<button @click="value += 5">Add 5</button>
15+
<button @click="value += 1">Add 1</button>
16+
<p>{{ result }}</p>
17+
</div>
18+
<!-- 2) Watch for changes in the "result" and reset the "value" after 5 seconds (hint: setTimeout(..., 5000) -->
19+
<div>
20+
<input type="text">
21+
<p>{{ value }}</p>
22+
</div>
23+
</div>
24+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
25+
<script src="../js/exercises3.js"></script>
26+
</body>
27+
</html>

‎js/exemplo8.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
new Vue({
2+
el: '#app',
3+
data:{
4+
attachRed: false,
5+
attachGreen: false,
6+
attachBlue: false
7+
}
8+
});

‎js/exercises3.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
new Vue({
2+
el: '#exercise',
3+
data: {
4+
value: 0
5+
},
6+
computed: {
7+
result: function() {
8+
return this.value >= 37 ? 'done' : 'not there yet';
9+
}
10+
},
11+
watch: {
12+
result: function() {
13+
var vm = this;
14+
setTimeout(function() {
15+
vm.value = 0;
16+
}, 5000);
17+
}
18+
}
19+
});

0 commit comments

Comments
 (0)