Arrays and Conditionals

by Wosley Bago

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app"> 
   <p v-show="show">Now you see me</p>
   <button @click="show = !show">Click me</button>
   <template>
     <p>All goes in this paragraph</p>
   </template>
   <hr>
   
   <!--ARRAYS AND OBJECTS-->
   
   <ul>
     <li v-for="person in persons">{{person.name}}</li>
   </ul>
   <hr>
   <ul>
     <li v-for="person in persons">
       <div v-for="(value, key) in person">{{key}}: {{value}}</div>
     </li>
   </ul>
   <hr>
   <ul>
     <li v-for="(ingredient, i) in ingredients" :key="ingredient">{{ingredient}}</li>
   </ul>
   
   
   <div id="example">
     <button @click="see()">Toggle</button>
     <p v-show="first">You either see me ...</p>
     <p v-show="second">...or me</p>
   </div>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
</div>

JavaScript

new Vue({
  el: '#example',
  data: {
    show: true,
    ingredients: ['strawberry', 'mango'],
    persons: [
        {name: 'Sidney', age: 27, color: 'red'},
        {name: 'André', age: 29, color: 'blue'}
    ],
    first: false,
    second: false
  },
 
  
})