Python:用Pandas輸出格式化HTML並高亮
阿新 • • 發佈:2022-05-19
HTML
<template id="my-app"> <table> <thead> <th>序號</th> <th>書籍名稱</th> <th>出版時間</th> <th>價格</th> <th>購買數量</th> <th>操作</th> </thead> <tbody> <tr v-for="(book,index) in books"> <td> {{index + 1}}</td> <td>{{book.name}}</td> <td>{{book.date}}</td> <td>{{book.price}}</td> <td> <button :disabled="book.count <= 1" @click="decrement(index)">-</button> {{book.count}} <button @click="increment(index)">+</button> </td> <td> <button @click="removeBook(index)">移除</button> </td> </tr> </tbody> </table> <h2>總價格:{{totelPrice}}$</h2> </template>
js
Vue.createApp({ template: "#my-app", data() { return { books: [{ id: 1, name: '《演算法導論》', price: 12, date: '2022-6', count: 1 }, { id: 2, name: '《java》', price: 11, date: '2012-6', count: 1 }, { id: 3, name: '《javasCript》', price: 14, date: '2022-4', count: 2 }, { id: 4, name: '《資料庫》', price: 16, date: '2022-1', count: 3 }, { id: 5, name: '《系統設計與實現》', price: 55, date: '2020-6', count: 1 } ] } }, computed: { totelPrice() { let finalprice = 0 for (let book of this.books) { finalprice += book.price * book.count } return finalprice } }, methods: { increment(index) { this.books[index].count++ }, decrement(index) { this.books[index].count-- }, removeBook(index) { this.books.splice(index, 1) } } }).mount("#app")