vue框架实现购物车项目

最新推荐文章于 2024-04-01 23:43:17 发布

Lubin_9527

最新推荐文章于 2024-04-01 23:43:17 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/Lubin_9527/article/details/82795392

版权

使用vue框架实现购物车功能

vue框架简介

1：MVVM 模型
Model 模型 - 数据
View 视图 - html 标签，样式
ViewModel 用来结合模型和视图 - 决定数据展示在哪个标签上

2：vue中的数据和页面上标签内容是’绑定’在一起的，模型数据发生了变动，页面视图也会相应变化。这种特性称之为响应式框架。

实现代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--购物车表格-->
    <table border="1" width="100%">
        <thead>
        <tr>
            <td><input type="checkbox" v-model:checked="checkAll" @click="gouxuan()"></td>
            <td>编号</td>
            <td>名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>图片</td>
            <td>移除</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(p, i) in list">
            <td><input type="checkbox" :checked="p.c"></td>
            <td>{{i+1}}</td>
            <td>{{p.name}}</td>
            <td>{{p.price}}</td>
            <td>
                <input type="button" value="-" @click="jian(i)">
                <input type="number" :value="p.count">
                <input type="button" value="+" @click="jia(i)">
            </td>
            <td><img width="100" :src="'images/' + p.img"></td>
            <td><input type="button" value="删除" @click="remove(i)"></td>
        </tr>
        </tbody>
        <tfoot>
            <td colspan="7">总价<span>{{total}}</span></td>
        </tfoot>
    </table>

    <!--商品表格-->
    <table>
        <tbody>
            <tr v-for="(p, i) in products">
                <td>{{p.name}}</td>
                <td>{{p.price}}</td>
                <td><img width="50" :src="'images/'+p.img"></td>
                <td><input type="button" value="添加至购物车" @click="add(i)"></td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    var vue = new Vue({
        el: "#app",
        data:{
            checkAll: true, /*代表最上方复选框的选中状态*/
            list:[ /* 购物车商品*/
                {name:"商品1", price:3000.00, img:"5a0cf6bfN92a5a597.jpg",title:"提示1!!!!!!!!!!!!!!", count:1, c:true},
                {name:"商品2", price:4000.00, img:"5a0cf672N3c785b7a.jpg",title:"提示2!!!!!!!!!!!!!!", count:1, c:true},
                {name:"商品3", price:2000.00, img:"5a1f5ed3Nfa577958.jpg",title:"提示3!!!!!!!!!!!!!!", count:1, c:true}
            ],
            products:[
                {name:"商品1", price:3000.00, img:"5a0cf6bfN92a5a597.jpg",title:"提示1!!!!!!!!!!!!!!"},
                {name:"商品2", price:4000.00, img:"5a0cf672N3c785b7a.jpg",title:"提示2!!!!!!!!!!!!!!"},
                {name:"商品3", price:2000.00, img:"5a1f5ed3Nfa577958.jpg",title:"提示3!!!!!!!!!!!!!!"},
                {name:"商品4", price:2000.00, img:"5a1f5664Nfa934fac.jpg",title:"提示3!!!!!!!!!!!!!!"},
                {name:"商品5", price:2000.00, img:"5a1fd0c4N73c671f2.jpg",title:"提示3!!!!!!!!!!!!!!"},
                {name:"商品6", price:2000.00, img:"5a2b4fffN4b32a616.jpg",title:"提示3!!!!!!!!!!!!!!"}
            ],
            total:0.0
        },
        methods: {
            add: function(i) {
                // 从products找到这个商品，添加至list中
                var p = this.products[i]; // 要添加的商品

                // 遍历list集合，看有没有商品
                var find = false;
                for(var j = 0; j < this.list.length; j++) {
                    if(this.list[j].name == p.name){ // 判断名字是否一样
                        this.jia(j); // 名字一样，数量加1
                        find = true;
                        break;
                    }
                }
                if(!find) { // 还没有找到
                    this.list.push({name: p.name, price: p.price, img: p.img, count:1, c:true});
                    this.sum();
                }
            },
            gouxuan: function(){
                //console.log(this.checkAll);
                for(var i = 0; i <this.list.length; i++) {
                    this.list[i].c = !this.checkAll; // 把集合中每个元素的c属性修改为 checkAll的状态(需要取反)
                }
            },
            remove: function(i){
                this.list.splice(i, 1); // 删除下标为i的元素，后面的1表示删除一个
                this.sum();
            },
            jian: function(i) {
                var v = this.list[i].count;
                if(v > 1) {
                    this.list[i].count = v-1;
                }
                this.sum();
            },
            jia: function(i) {
                this.list[i].count++;
                this.sum();
            },
            sum: function() {
                this.total = 0.0;

                    for(var i = 0; i < this.list.length; i++) {
                        this.total += this.list[i].price * this.list[i].count;
                    }
            }
        },
        // 在vue对象初始化完毕后，会调用 mounted 函数
        mounted: function() {
            this.sum();
        }

    });
</script>
</body>
</html>

Lubin_9527

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue框架实现购物车项目

使用vue框架实现购物车功能vue框架简介1：MVVM 模型Model 模型 - 数据View 视图 - html 标签，样式ViewModel 用来结合模型和视图 - 决定数据展示在哪个标签上2：vue中的数据和页面上标签内容是’绑定’在一起的，模型数据发生了变动，页面视图也会相应变化。这种特性称之为响应式框架。实现代码&lt;!DOCTYPE html&gt;...
复制链接

扫一扫