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

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

 

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

​

以上就是 直播商城源码，vue制作简易的购物车，更多内容欢迎关注之后的文章

 

posted @ 2022-07-01 14:10  云豹科技-苏凌霄  阅读(127)  评论(0)    收藏  举报