Vue实战-购物车案例

 

Vue实战-购物车案例

 

Vue实战-购物车案例

Vue快速入门（二）

普通购物车

实现的功能：添加商品到购物车，计算总价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    th,td{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">购物车案例</h2>
                <table class="table table-bordered table-hover">
                    <!--表头-->
                    <tr>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>添加购物车</th>
                    </tr>
                    <!--表体-->
                    <tr v-for="data in dataList">
                        <td>{{data.name}}</td>
                        <td>{{data.price}}</td>
                        <td>{{data.number}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="data"></td>
                    </tr>
                </table>
                <!--购物车选中状态 -->
                <hr>
                <p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>
                <p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>
                <!--计算总价-->
                <hr>
                总价:{{totalPrice()}}
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            //商品数据
            dataList: [
                {name: 'Python实战', price: 66, number: 2},
                {name: 'Linux实战', price: 55, number: 1},
                {name: 'Java实战', price: 77, number: 1},
            ],
            //购物车
            checkGroup: [],
        },
        methods: {
            //计算总价
            totalPrice(){
                // 总价初始化
                var total = 0
                for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
}
}
})
</script>
</html>

image

PS：for循环的多种形式

上面我们使用for (i in 数组/对象)的形式，在js中for循环常用的形式有四种

//方式一： i是索引,循环选中的商品，基于迭代的循环
for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
 }

// 方式二： 基于索引的循环，最普通的
for (var i=0;i<this.checkGroup.length;i++) {
	total += this.checkGroup[i].price * this.checkGroup[i].number
	}

 //方式三： 基于迭代 for of (es6)
for (v of this.checkGroup) {
	total += v.price * v.number
 }

 // 方式四：forEach  可迭代对象(数组)的方法，数组而言v是值，i是索引
this.checkGroup.forEach(function(v,i){
  this.checkGroup.forEach((v,i)=>{
    total += v.price * v.number
                })

进阶购物车

一键加入购物车功能实现#

基于普通购物车实现功能：一键添加购物车功能

通过v-model双向绑定实现，input框绑定change事件， checkbox选中true反之false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    th,td{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">购物车案例</h2>
                <table class="table table-bordered table-hover">
                    <!--表头-->
                    <tr>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <!-- <th>添加购物车</th>-->
                        <th>全选/取消全选&nbsp;<input type="checkbox" v-model="checkall" @change="handleAll"></th>

                    </tr>
                    <!--表体-->
                    <tr v-for="data in dataList">
                        <td>{{data.name}}</td>
                        <td>{{data.price}}</td>
                        <td>{{data.number}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>
                    </tr>
                </table>
                <!--购物车选中状态 -->
                <hr>
                <p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>
                <p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>
                <!--计算总价-->
                <hr>
                <p style="font-size: 20px">总价:{{totalPrice()}}￥</p>
                <hr>
                <!--是否全选-->
<!--                <p>是否全选： {{checkall}}</p>-->
                <div style="font-size: 20px">
                    <p v-if="checkall === false">是否全选：否 ---  {{checkall}}</p>
                    <p v-else-if="checkall === true">是否全选：是 ---  {{checkall}}</p>
                </div>

            </div>
        </div>
    </div>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
//商品数据
            dataList: [
{name: 'Python实战', price: 66, number: 2},
{name: 'Linux实战', price: 55, number: 1},
{name: 'Java实战', price: 77, number: 1},
],
//购物车
            checkGroup: [],
//全选,默认不全选
            checkall:false
},
        methods: {
//计算总价
totalPrice(){
// 总价初始化
var total = 0
for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
},
//处理全选
handleAll(){
if (this.checkall){
//全选
this.checkGroup = this.dataList
}else {
this.checkGroup=[]
}
},
handleOne(){
//全选
if (this.checkGroup.length==this.dataList.length){
this.checkall=true
//不全选
}else {
this.checkall=false
}
}
}
})
</script>
</html>

image


商品数量加减的实现#

实现功能：通过添加+，-样式来控制商品数量的加减

注意：这里暂时不考虑库存的情况，且减少商品数量做单独处理，解决减少数量小于1的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<style>
    th,td{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">购物车案例</h2>
                <table class="table table-bordered table-hover">
                    <!--表头-->
                    <tr>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <!-- <th>添加购物车</th>-->
                        <th>全选/取消全选&nbsp;<input type="checkbox" v-model="checkall" @change="handleAll"></th>

                    </tr>
                    <!--表体-->
                    <tr v-for="data in dataList">
                        <td>{{data.name}}</td>
                        <td>{{data.price}}</td>
                        <td>
                        <!-- 商品减少 -->
                            <button @click="handleCount(data)">-</button>
                            {{data.number}}
                        <!-- 商品增加 -->
                            <button @click="data.number++">+</button>
                        </td>
                        <td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>
                    </tr>
                </table>
                <!--购物车选中状态 -->
                <hr>
                <p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>
                <p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>
                <!--计算总价-->
                <hr>
                <p style="font-size: 20px">总价:{{totalPrice()}}￥</p>
                <hr>
                <!--是否全选-->
<!--                <p>是否全选： {{checkall}}</p>-->
                <div style="font-size: 20px">
                    <p v-if="checkall === false">是否全选：否 ---  {{checkall}}</p>
                    <p v-else-if="checkall === true">是否全选：是 ---  {{checkall}}</p>
                </div>
</div>
</div>
</div>
</div>
</body>
<script>var vm = new Vue({
        el: '#app',
        data: {
//商品数据
            dataList: [
{name: 'Python实战', price: 66, number: 2},
{name: 'Linux实战', price: 55, number: 1},
{name: 'Java实战', price: 77, number: 1},
],
//购物车
            checkGroup: [],
//全选,默认不全选
            checkall:false
},
        methods: {
//计算总价
totalPrice(){
// 总价初始化
var total = 0
for (i in this.checkGroup){
                    console.log(i) // i是索引
                    total += this.checkGroup[i].price * this.checkGroup[i].number
}
return total
},
//处理全选
handleAll(){
if (this.checkall){
//全选
this.checkGroup = this.dataList
}else {
this.checkGroup=[]
}
},
handleOne(){
//全选
if (this.checkGroup.length==this.dataList.length){
this.checkall=true
//不全选
}else {
this.checkall=false
}
},
//商品减少
handleCount(data){
if (data.number<=1){
alert('不能再少了')
}
else {
                    data.number--
}
}
}
})
</script>
</html>

image

不足：下面的提示信息可以隐藏，个人只是为了提示，商品删除没有写自行实现

posted @ 2022-04-14 09:28  hai起奈  阅读(441)  评论(0)  编辑  收藏  举报