Hivelab Vina

Step 1: News - More Tiếp nối nội dung đã được xây dựng ở Part2 , lần này chúng ta sẽ thêm tính năng xử lý với button Xem thêm (More). Cú pháp chính Cryptocurrency.vue // HTML template syntax <article> <div class="h_area"> <h2>Recent News</h2> </div> <ul> <li v-for="item in news" :key="item.id"> <a :href="item.url"> <div class="bx_thumb"> <img :src="item.imageurl" width="60" height="60" :alt="item.body"> </div> <dl> <dt>[{{item.published_on | moment}}] {{item.title}} </dt> <dd> <p>{{item.body}}</p> </dd> </dl> </a> </li> </ul> ...

Step 1: Ratio Tiếp nối nội dung đã được xây dựng ở Part1 , lần này chúng ta sẽ thêm data lượng giao dịch 24 giờ. Vì data giá (PRICE) và data tỷ lệ biến động 24 giờ (CHANGEPCT24HOUR) của data phản hồi API ở trong cùng một node nên sẽ tham khảo code xây dựng PRICE và thêm code vào. Nếu sử dụng Finder để tìm kiếm và trực quan hóa JSON Path phức tạp thì việc tạo code sẽ thuận lợi hơn. Cú pháp chính Cryptocurrency.vue // ① HTML 템플릿 구문 <tr> <td>{{cryptoPrice.BTC}}</td> <td>{{cryptoPrice.ETH}}</td> <td>{{cryptoPrice.XRP}}</td> </tr> <tr> <td>{{cryptoRatio.BTC}}</td> <td>{{cryptoRatio.ETH}}</td> <td>{{cryptoRatio.XRP}}</td> </tr> // ② 데이터 객체 data() { return { cryptoPrice: { BTC: 0, ETH: 0, XRP: 0 }, cryptoRatio: { BTC: 0, ETH: 0, XRP: 0 } } }, // ③ ...