【购物车】

最新推荐文章于 2024-07-22 15:13:59 发布

夜星639

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_65923595/article/details/123879525

版权

<!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="./js/vue.min.js"></script>

</head>

<body>
    <div id="app" v-if="books.length">
        <table border="2" align="center" width="600px" cellspacing="0">
           <thead>
               <tr>
                   <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.price | showPrice}}</td>
                   <td>
                       <button @click="decrement(index)" v-bind:disable="item.count<=0">-</button>
                       {{item.count}}
                       <button @click="increment(index)">+</button>
                   </td>
                   <td>
                       <button @click="removeHandle">清除</button>
                   </td>
               </tr>
           </tbody>
        </table>
        <h3 v-else="books.length">购物车为空</h3>
 
      
        <h2 align="center">总价格：{{totalPrice | showPrice}}</h2>
       
    
    </div>
    <script>
        var app = new Vue({
        el: "#app",
        data: {
        id: 0,
        name: '',
        price: 0,
        count: 0,
        books: [
            {
        id: 1,
        name: "华为",
        price: 6666.66,
        count: 2
        },
        {
        id: 2,
        name: "小米",
        price: 7776,
        count: 3
        },
        {
        id: 3,
        name: "苹果x",
        price: 1166,
        count: 8
        },
        {
        id: 4,
        name: "oppo",
        price: 9966,
        count: 4
        },
        ]
        },
        methods: {
            increment(index){
                this.books[index].count++;
            },
            decrement(index){
                this.books[index].count--;
                if(this.books[index].count < 0){
                   this.books[index].count = 0
                }
            },
            removeHandle(index){
                this.books.splice(index,1)
                for(let i = 0;i < this.books.length;i++){
                    this.books[i].id = i + 1
                }
            }
        },
        filters: {
            showPrice(price){
                return "￥" + price.toFixed(2)
            }
        },
        computed: {
            totalPrice(){
                let totalPrice = 0
                for(let i = 0;i < this.books.length;i++){
                    totalPrice += this.books[i].price*this.books[i].count
                }
                return totalPrice
            }
        }
        })
    </script>
</body>

</html>

夜星639

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【购物车】

<!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>D.
复制链接

扫一扫