Home Explore Help
Sign In
fgm
/
js_vue__laracasts
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

lesson 5: dynamically changing bound attributes.

Frederic G. MARAND 7 years ago
parent
3ba589a140
commit
92e925967c
3 changed files with 30 additions and 0 deletions
Split View Show Diff Stats
  1. 11 0
      lesson5/code.js
  2. 3 0
      lesson5/index.html
  3. 16 0
      lesson5/styles.css

+ 11 - 0
lesson5/code.js
View File 

@@ -2,12 +2,23 @@
 
 const app = new Vue({
 
   el: '#root',
 
   data: {
 
+    className: 'royal',
 
+    isDisabled: false,
 
+    isLoading: false,
 
     title: "Now the title is set through JavaScript",
 
   },
 
 
   methods: {
 
     onClick(e) {
 
       alert(e.target.textContent);
 
+    },
 
+
 
+    setDisabled() {
 
+      this.isDisabled = true;
 
+    },
 
+
 
+    toggleClass() {
 
+      this.isLoading = !this.isLoading;
 
     }
 
   },
 
 });

+ 3 - 0
lesson5/index.html
View File 

@@ -7,8 +7,11 @@
 
   </head>
 
   <body>
 
     <div id="root">
 
+      <h1 :class="className">Heading 1</h1>
 
       <button v-on:click="onClick" v-bind:title="title">Hover over me</button>
 
       <button @click="onClick" :title="title">Over me too</button>
 
+      <button @click="toggleClass" :class="{ 'is-loading': isLoading }">Toggle me</button>
 
+      <button @click="setDisabled" :disabled="isDisabled">Try to click me</button>
 
     </div>
 
 
     <script src="../lib/vue-2.1.3.js"></script>

+ 16 - 0
lesson5/styles.css
View File 

@@ -1,3 +1,19 @@
 
+button {
 
+  display: block;
 
+}
 
+
 
 [v-cloak] {
 
   display: none;
 
 }
 
+
 
+.royal {
 
+  color: red;
 
+}
 
+
 
+.cardinal {
 
+  color: purple;
 
+}
 
+
 
+.is-loading {
 
+  background-color: red;
 
+}