vueJs/vue_3.html at master · naihsienchen/vueJs · GitHub

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
<!DOCTYPE HTML>
<html>
	<head>
		<title>v-if If Statements</title>
		<meta charset="UTF-8">
		<script src="https://kit.fontawesome.com/183ccfc82e.js" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			* {font-family: 'Roboto', sans-serif;}
			.special {background:yellow; border: 1px dotted #fe0000; padding:30px; display:block; text-align:center;}
			.important {font-weight:bold; font-size:30px;}
			.container {padding: 2px 16px;}
			.card {width: 20%; text-align: center; margin: auto; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s;}
		</style>
	</head>
	<body>

	<div id="app" class="card">
		<span v-if="profile">
			<span v-if="profile.pic">
				<img v-bind:src="profile.pic" alt="Avatar" style="width:15vw">
			</span>
			<span v-else>
				<i class="fas fa-user-astronaut" style="font-size: 8em; padding: 10px;"></i>
			</span>
			<div class="container">
			<h4><b>{{profile.fname}} {{profile.lname}}</b></h4>
		    <p>{{profile.desc}}</p>
			<p v-if="profile.bio">{{profile.bio}}</p>
			<p v-else="!profile.bio">no bio available</p>
		</div>
		</span>
		<span v-else>
			No Profile Data found.
		</span>
	</div>

	<script>
	var app = new Vue({
		el: '#app',
		data:{
			profile:{
				fname: "Nai-Hsien",
				lname: "Chen",
				desc: "Web Developer",
				bio: "Passionate about front-end development",
			 	pic: 'https://nhcto.ca/assets/img/avatar/Avatar-Maker-pink.png'
			}
		}
	});

	</script>

		<!--
		//step 1: Read Code Above
		//step 2: Does the profile show up?

		v-if="boolean_expression"
		v-else-if="boolean_expression"
		v-else


		You can code an if, else if, else statement into your render using the v-if, v-else-if, v-else.
		Just like in regular programming, v-else has no condition

		Notice how the "profile" object is null. Reminder that null is Falsey in the boolean context.

		ASYNCHRONOUS LEARNING EXERCISE
		1. Use the profile object to store information about yourself {fname, lname, desc, bio, pic}
		2. Create a figure, figcaption, and image markup which acts as a description for yourself
			(Something like this https://www.w3schools.com/howto/howto_css_cards.asp)
		3. Write conditionals if information is missing (i.e. 'no bio available' if bio is blank, generic image if no pic is found)
		-->
	</body>
</html>