Vue-Examples/attributes_binding.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
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <script src="https://unpkg.com/vue@2.4.2"></script>

      <style media="screen">
         .green{
            background: #2ECC71;
            border:1px solid #2ECC71;
            border-radius: 5px;
         }

         .red{
            background: #C0392B;
            border:1px solid #C0392B;
            border-radius: 5px;
         }
      </style>
   </head>
   <body>
      <div id="root">
         <button type="button" name="button" :disabled="disabled">save</button>
         <button type="button" name="button" :class="{red}">not complate</button>
         <button type="button" name="button" :class="{green}">complate</button>
      </div>

      <script>

         var app = new Vue({
            el: "#root",
            data:{
               disabled :  true,
               red      :  true,
               green    :  true,
            }
         });
      </script>
   </body>
</html>

<!--html مال  attribueهذا المثال تعلمنا شون نسوي بايند وية ال -->