tyrel/learnin-some-vue
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

s3e38 v-for

Browse Source
This commit is contained in:
Tyrel Souza 2018-04-13 22:59:43 -04:00
parent 25a3f1612a
commit 250024e34b
No known key found for this signature in database
GPG Key ID: 5A9394D4C30AEAC0
2 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app.js
View File

@ -1,6 +1,10 @@
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
show: true ingredients: ['meat', 'fruit', 'cookies'],
persons: [
{name: "Max", age: 33, color: "red"},
{name: "Tyrel", age: 30, color: "blue"},
]
} }
}); });

16
index.html
View File

@ -7,17 +7,11 @@
</head> </head>
<body> <body>
<div id='app'> <div id='app'>
<button type="button" name="button" @click="show = !show"> <ul>
Switch <li v-for="ingredient in ingredients">
</button> {{ ingredient }}
</li>
<p v-if="show">You can see me</p> </ul>
<p v-else>Now you see me</p>
<template v-if="show">
<h1>Heading</h1>
<p>Inside a template</p>
</template>
<p v-show="show">Do you also see me?</p>
</div> </div>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>
</body> </body>