提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue制作简易购物车

Vue 制作 简易 购物车
2023-09-11 14:15:13 时间

功能描述

  • 修改商品数量，同时价格动，总价态变化。
  • 点击删除按钮可以动态删除商品

具体代码 

<!DOCTYPE html>
<html lang="en">
<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>

 要点注意 ❗

 这里注意要用for...of循环

 区别for...in和for...of的用法

 for-in遍历的是key，只能获得对象的键名，不能获得键值(适合遍历对象)

 for-of遍历的是value，允许遍历获得键值(适合遍历数组)

具体效果

相关文章