直播商城源码，vue制作简易的购物车

<!DOCTYPE html><br><html><br><head><br>    <meta charset="UTF-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <title>Document</title><br>    <script src="vue3.0.js"></script>  //引入vue.js包<br>    <style><br>        body {<br>width: 600px;<br>}<br>table {<br>    border: 1px solid black;<br>}<br>table {<br>    width: 100%;<br>}<br>th {<br>    height: 50px;<br>}<br>th, td {<br>    border-bottom: 1px solid #ddd;<br>    text-align: center;<br>}<br>span {<br>float: right;<br>}<br>[v-cloak] {<br>display: none;<br>}<br>    </style><br></head><br><body><br>    <div id="app"><br>        <table><br>            <tr><br>                <th>商品号</th><br>                <th>商品</th><br>                <th>单价</th><br>                <th>数量</th><br>                <th>金额</th><br>                <th>操作</th><br>            </tr><br>            <tr v-for='(book,index) in books' :key="book.id"><br>                <td>{{book.id}}</td><br>                <td>{{book.title}}</td><br>                <td>{{book.price}}</td><br>                <td><br>                    <button :disabled="book.count===0" @click="book.count--">-</button><br>                    {{book.count}}<br>                    <button @click="book.count++">+</button> <br>                </td><br>                <td>{{itemprice(book.price,book.count)}}</td><br>                <td><button @click="deleteitem(index)">删除</button></td><br>            </tr><br>            <br>        </table><br>        <p>总价：￥{{totalprice}}</p><br>    </div><br>    <script><br>        //vue3.0语法<br>        const vm=Vue.createApp({<br>            data(){<br>                return{<br>                    books:[{<br>                            id: 1,<br>                            title: 'Java无难事',<br>                            price: 188,<br>                            count: 1<br>                          },<br>                          {<br>                            id: 2,<br>                            title: 'C++深入详解',<br>                            price: 168,<br>                            count: 1<br>                          },<br>                          {<br>                            id: 3,<br>                            title: 'Servlet/JSP深入详解',<br>                            price: 139,<br>                            count: 1<br>                          }]<br>                        <br>                    }<br>                },<br>                methods:{<br>                    itemprice(price,count){<br>                        return price*count;<br>                    },<br>                    deleteitem(index){<br>                        this.books.splice(index,1);<br>                    }<br>                },<br>                computed:{<br>                    totalprice(){<br>                        let total=0;<br>                        for(let book of this.books)<br>                        {<br>                            total+=book.price*book.count;<br>                        }<br>                        return total;<br>                    }<br> <br>                }<br>            }).mount("#app");<br>    </script><br></body><br></html>