Vue 小练习--购物车

效果如下：
在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title</title>
    <style type="text/css">
        table,td,th{
            border:1px solid black;
            padding: 5px;
            text-align: center;
             border-collapse: collapse;
        }
        th{
            background-color:#ccc;
        }
    </style>
</head>
<body>

 <div id="app">
    <div v-if="books.length>0">
        <table>
            <tr>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </th>
            <tr v-for="(book,index) in books">
                <td>{{index+1}}</td>
                <td>{{book.name}}</td>
                <td>{{book.date}}</td>
                <td>￥{{book.price.toFixed(2)}}</td>
                <td>
                    <button @click="sub(index)" :disabled="book.num <= 1">-</button>
                    <span>{{book.num}}</span>
                    <button @click="add(index)">+</button>
                </td>
                <td><button @click="removelist(index)">移除</button></td>
            </tr>
        </table>
        <span >总价:￥{{totalPrice.toFixed(2)}}</span>
    </div>
    <p v-else>购物车为空</p>
</div>

	<script src="vue.js"></script>
    <script>
    	var app = new Vue({
    		el:'#app',
    		data:{
    			books:[
                   {
                     name:'《算法导论》',
                     date:'2006-9',
                     price:85,
                     num:1
                   },
                   {
                     name:'《linux编程艺术》',
                     date:'2006-2',
                     price:59,
                     num:1
                   },
                   {
                     name:'《编程珠玑》',
                     date:'2008-10',
                     price:29,
                     num:1
                   },
                   {
                     name:'《代码大全》',
                     date:'2006-3',
                     price:128,
                     num:1
                   }
                ]
    		},
            methods:{
                add(index){
                    this.books[index].num++;
                },
                sub(index){
                    this.books[index].num--;
                },
                removelist(index){
                    this.books.splice(index,1);
                }
            },
            computed:{
                totalPrice(){
                    let totalPrice=0;
                    for(let i=0;i<this.books.length;i++)
                    {
                        totalPrice+=this.books[i].price*this.books[i].num;
                    }
                    return totalPrice;
                }
            }

    	});
    </script>

</body>
</html>
来源：CSDN
作者：coca-ovo
链接：https://blog.csdn.net/weixin_43682982/article/details/104214672
标签
购物车