Vue-Examples-Part2/index.html at master · CodeLabBootcamp/Vue-Examples-Part2 · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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">
         <h4>{{msg.split('').reverse().join('')}}</h4>

         <h2>{{reverseMsg}}</h2>

         <h2>all tasks</h2>
         <ul>
            <li v-for="task in tasks">
               {{task.info}}
               <span v-if="task.finish">✅</span>
               <span v-else>❌</span>
            </li>
         </ul>

         <h2>complated</h2>
         <ul>
            <li v-for="task in finishedTasks">{{task.info}}</li>
         </ul>

         <h2>not complated</h2>
         <ul>
            <li v-for="task in notFinishedTasks">{{task.info}}</li>
         </ul>

         <input type="text" v-model="input">
         <br>
         <span v-if="isVisible">The field is required</span>
      </div>

      <script>

         var app = new Vue({
            el: "#root",
            data:{
               msg   :  "HELLO",
               tasks :  [
                  {
                     "info"  :  "go",
                     "finish" :  true
                  },
                  {
                     "info"  :  "run",
                     "finish" :  false
                  },
                  {
                     "info"  :  "sleep",
                     "finish" :  true
                  },
                  {
                     "info"  :  "jump",
                     "finish" :  false
                  }
               ],
               input :  "",
               isVisible   :  false,
            },
            methods: {

            },
            computed:{
               reverseMsg: function () {
                  return this.msg.split('').reverse().join('');
               },
               finishedTasks:function () {
                  return this.tasks.filter(function (task) {
                     if(task.finish)
                        return task;
                  })
               },
               notFinishedTasks:function () {
                  return this.tasks.filter(function (task) {
                     if(!task.finish)
                        return task;
                  })
               }
            },
            watch:{
               input:function (val) {
                  // alert(val);
                  // this.isVisible =  val   == "";
                  this.isVisible =  !val;
               },
            }

         });


      </script>
   </body>
</html>