温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue怎么实现可改变购物数量的购物车

发布时间:2022-03-24 11:11:25 阅读:244 作者:iii 栏目:web开发
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇内容主要讲解“vue怎么实现可改变购物数量的购物车”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么实现可改变购物数量的购物车”吧!

效果图:

vue怎么实现可改变购物数量的购物车

知识点:

1.computed 计算属性
2.filters 过滤器

实现代码:

<!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>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
    table {
        border-collapse: collapse;
        border-spacing0;
        border1px solid #ccc;
    }
    
    td,
    th {
        padding8px 16px;
        border1px solid #ccc;
        text-align: left;
    }
    
    th {
        background-color#f7f7f7;
        color#5c6b77;
    }
</style>

<body>
    <div id="box">
        <div v-if="books.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <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.date}}</td>
                        <td>{{item.price | toprice}}</td>
                        <td>
                            <button @click="down(index)" :disabled="item.aunt<=1">-</button> {{item.aunt}}
                            <button @click="add(index)">+</button>
                        </td>
                        <td>
                            <button @click="remove(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>总价:{{getallprice | toprice}}</h2>
        </div>
        <h2 v-else>您没有购物信息</h2>
    </div>
    <script>
        const vm = new Vue({
            el"#box",
            data: {
                books: [{
                    id1,
                    name"《vue.js实战》",
                    date"2010.2.4",
                    price82.00,
                    aunt1
                }, {
                    id2,
                    name"《javascript实战》",
                    date"2010.2.4",
                    price108.00,
                    aunt1
                }, {
                    id3,
                    name"《html+css实战》",
                    date"2010.2.4",
                    price42.50,
                    aunt1
                }, {
                    id4,
                    name"《axios实战》",
                    date"2010.2.4",
                    price82.00,
                    aunt1
                }, {
                    id5,
                    name"《jquery实战》",
                    date"2010.2.4",
                    price65.20,
                    aunt1
                }, ]
            },
            methods: {
                add(index) {
                    this.books[index].aunt++;
                },
                down(index) {
                    this.books[index].aunt--;
                },
                remove(index) {
                    this.books.splice(index, 1)
                },

            },
            computed: {
                getallprice() {
                    let all = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        all += this.books[i].price * this.books[i].aunt
                    }
                    return all
                }
            },
            filters: {
                toprice(price) {
                    return "¥" + price.toFixed(2)
                },

            }
        })
    </script>
</body>

</html>

到此,相信大家对“vue怎么实现可改变购物数量的购物车”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI

开发者交流群×