截图


代码

  • html
<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title></title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
			
        <div id="app">
		  <div v-if="books.length!=0">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
				<tbody >
					<tr v-for="(item,index) in books">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.date}}</td>
								      <!-- <td>{{item.price.toFixed(2)}}</td>  保留两位小数  -->
											<!-- <td>{{getFinalPrice(item.price)}}</td> --> <!-- 方法实现 -->
						<td>{{item.price | finalPrice}}</td>   <!-- 过滤器 -->
						<td>
							<button @click="decrement(index)" :disabled="item.count <= 1">-</button>
								{{item.count}}
							<button @click="increment(index)">+</button>
						</td>
						<td>
							<button @click="removeHandle(index)" >移除</button>
						</td>
					</tr>
				</tbody>
            </table>
			<h2>总价格：{{totalPrice | finalPrice}}</h2>
			</div>
			<div v-else>
				购物车为空
			</div>
        </div>
    <script src="../js/vue.js"></script>
    <script src="index.js"></script>
    </body>
</html>
  • css
table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}

th,td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}

th {
    background-color: #f7f7f7;
    color: black;
    font-weight: 600;
}
  • js
const app = new Vue({
    el : '#app',
    data : {
        books : [
            {
                id : 1,
                name : "算法导论",
                date : "2006-9",
                price : 85.00,
                count : 1
            },
            {
                id : 2,
                name : "Unix编程艺术",
                date : "2007-2",
                price : 59.00,
                count : 1
            },
            {
                id : 3,
                name : "编程珠玑",
                date : "2007-2",
                price : 49.00,
                count : 1
            },
            {
                id : 4,
                name : "代码大全",
                date : "2010-2",
                price : 120.00,
                count : 1
            }
        ]
    },
		methods:{
			getFinalPrice(price){
				return '¥ ' + price.toFixed(2);
			},
			decrement(index){
				if(this.books[index].count>1)
					this.books[index].count--;
			},
			increment(index){
				this.books[index].count++;
			},
			removeHandle(index){
				this.books.splice(index,1);
			}
		},
		filters:{
			finalPrice(price){
				return '¥ ' + price.toFixed(2);
			}
		},
		computed :{
			totalPrice(){
				let total = 0;
				for(book of this.books){
					total+=book.price+book.count;
				}
				return total;
			}
		}
		
});