lesson-13

iamshaunjp · Sep 22, 2020 · e30e48c · e30e48c
1 parent 8252a28
commit e30e48c
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 3 deletions.
diff --git a/app.js b/app.js
@@ -1,11 +1,12 @@
 const app = Vue.createApp({
   data() {
     return {
+      url: 'https://www.thenetninja.co.uk',
       showBooks: true,
       books: [
-        { title: 'name of the wind', author: 'patrick rothfuss' },
-        { title: 'the way of kings', author: 'brandon sanderson' },
-        { title: 'something', author: 'something' },
+        { title: 'name of the wind', author: 'patrick rothfuss', img: 'assets/1.jpg' },
+        { title: 'the way of kings', author: 'brandon sanderson', img: 'assets/2.jpg' },
+        { title: 'the final empire', author: 'brandon sanderson', img: 'assets/3.jpg' },
       ],
     }
   },

diff --git a/assets/1.jpg b/assets/1.jpg
diff --git a/assets/2.jpg b/assets/2.jpg
diff --git a/assets/3.jpg b/assets/3.jpg
diff --git a/index.html b/index.html
@@ -19,9 +19,14 @@
   <h1>Hello, Vue :)</h1>
 
   <div id="app">
+    <!-- attribute binding -->
+    <!-- <a v-bind:href="url">Best website ever!</a> -->
+    <a :href="url">Best website ever!</a>
+
     <div v-if="showBooks">
       <ul>
         <li v-for="book in books">
+          <img :src="book.img" :alt="book.title">
           <h3>{{ book.title }}</h3>
           <p>{{ book.author }}</p>
         </li>