Vue-Examples/if_else.html at master · CodeLabBootcamp/Vue-Examples · 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
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <script src="https://unpkg.com/vue@2.4.2"></script>
   </head>
   <body>
      <div id="root">
         <h2>All tasks</h2>
         <ul>
            <li v-for="task in tasks">
               {{task.info}}
               <span v-if="task.completed">✅</span>
               <span v-else>❌</span>
            </li>
         </ul>

         <h2>Complated</h2>
         <ul>
            <li v-for="task in tasks" v-if="task.completed">{{task.info}}</li>
         </ul>

         <h2>Incomplated</h2>
         <ul>
            <li v-for="task in tasks" v-if="!task.completed">{{task.info}}</li>
         </ul>
      </div>

      <script>

         var app = new Vue({
            el: "#root",
            data:{
               tasks:[
                  {
                     "info"  :  "Go To home",
                     "completed" :  true
                  },
                  {
                     "info"  :  "Go To GYM",
                     "completed" :  false
                  },
                  {
                     "info"  :  "Go To Codelab",
                     "completed" :  true
                  },
                  {
                     "info"  :  "Clean The Room",
                     "completed" :  false
                  }
               ]
            }
         });
      </script>
   </body>
</html>