-
Notifications
You must be signed in to change notification settings - Fork 3
/
example_10.html
88 lines (82 loc) · 3.24 KB
/
example_10.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
<head>
<title>Vue.js Example 10</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/site.css">
<script src="lib/[email protected]"></script>
</head>
<body>
<div id="app" class="app--guess-game">
<div class="panel-group">
<div class="panel panel-default card">
<div class="panel-heading">
<h2>Guessing Game</h2>
</div>
<div class="panel-body">
<game-guess v-on:thenumber="checkNumber"></game-guess>
<div class="alert alert-success" v-if="isCorrect">
Correct: {{number}}
</div>
<div class="alert alert-danger" v-if="!isCorrect && hasGuessed">
Sorry, Guess again
</div>
</div>
</div>
</div>
</div>
<script>
/**
v-if is quite cool.
It lets us show / hide HTML elements based on properties.
In this case if the user has guessed the number a success message will be shown.
If not then "Sorry Guess again" will be displayed.
*/
var gameGuess = Vue.component('game-guess', {
template: `<div class="panel">
<input type="text" v-model="answer" placeholder="enter a number between 1 and 3"></input>
<button v-on:click="guess">Guess</button>
</div>`,
methods: {
guess: function () {
this.$emit('thenumber', this.answer);
}
}
});
var app = new Vue({
el: '#app',
data: function () {
return {
number: 0, //Some default value
isCorrect: false,
hasGuessed: false
}
},
created: function () {
/**
"created" is a "lifecycle hook",
and it's triggered when our component appears in the HTML.
the code we put here runs as soon as our component is created.
*/
this.number = Math.floor((Math.random() * 3) + 1);
},
components: {
'game-guess': gameGuess
},
methods: {
checkNumber: function (result) {
this.isCorrect = (this.number == result);
this.hasGuessed = true;
}
}
});
</script>
</body>
<!--
Example 10:
Create a login screen:
- Textbox where the user enters the password
- Button to login
If the user enters "pizza1234"
hide the login and show "Welcome to our Pizza place !"
else display a message "try again" above the textbox
-->