Vue基础之购物车案例

简介: Vue基础之购物车案例


分析案例结构

可以看出我们今天需要完成案例功能如下:

  1. 添加商品
  2. 动态渲染商品数据
  3. 商品搜索
  4. 完成商品全选
  5. 删除购物车中的商品
  6. 计算商品的总价

实现功能

1.动态渲染商品数据

首先开始写这个小案例之前,我们先复习一下之前所学过的知识:

  1. v-for:for循环遍历
  2. v-on:用于绑定事件监听器
  3. v-model:双向数据绑定
  4. @click:绑定点击事件
  5. :bind:实现双向数据绑定
  6. v-show:显示与隐藏
  7. v-if:条件判断语句
  8. @change:监听输入框变化事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .mycolor{
            background-color: #1aa5fb;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
<!--  商品添加-->
        id:<input type="text" v-model="id">
        商品名称:<input type="text" v-model="name">
        商品单价:<input type="text" v-model="price">
        商品数量:<input type="text" v-model="num">
        <button @click="addGood">添加</button>
    </div>
    <br>
    <div>
        <!--  商品搜索-->
        商品搜索:<input type="text" v-model="keyword">
        <button @click="searchGoods()">搜索</button>
    </div>
    <div>
        <!--  购物车-->
<!--        v-show:创建节点改display:none
            v-if:创建或销毁节点
-->
        <div v-if="goods.length!==0">
        <table border="1">
            <tr>
                <th>编号</th>
                <th>商品名称
                全选<input type="checkbox" v-model="isAll" @change="selectAll">
                </th>
                <th>商品单价</th>
                <th>商品数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in goods" :key="item.id" :class="{mycolor:(index+1)%2===0}">
                <td>{{item.id}}</td>
                <td>
                    <input type="checkbox" v-model="ckList" :value="item" @change="itemChange">
                    {{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="item.num--" v-bind:disabled="item.num<=1">-</button>
                    {{item.num}}
                    <button @click="item.num++">+</button>
                </td>
                <td>
                    <button @click="deleteGood(index)">删除</button>
                </td>
            </tr>
        </table>
        <p>总价:¥{{totalPrice}}</p>
    </div>
        <div v-else> 购物车为空</div>
    </div>
</div>
<script src="../vue2.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
        goods:[{
            id:1,
            name:'华为手机',
            price:4688,
            num:1
        },
            {
                id:2,
                name:'小米手机',
                price:1688,
                num:1
            },
            {
                id:3,
                name:'苹果手机',
                price:3688,
                num:1
            },
            {
                id:4,
                name:'荣耀手机',
                price:2688,
                num:1
            }
        ],
        id:'',
      name:'',
      price:'',
      num:'',
      keyword:"",//搜索关键字
      isAll:false,//是否全选
      ckList:[],//绑定表格中复选框,存放复选框选中数据
      mycolor: "mycolor",
  },
    methods: {
    //删除商品
        deleteGood(index){//形参index表示数组的索引
            this.goods.splice(index,1);//点击删除按钮,删除该商品
        },
        //添加商品
        addGood(){
        //新添加商品对象的属性与goods一致
            this.goods.push({
                id:this.id,
                name:this.name,
                price:this.price,
                num:this.num
            });
        },//搜索商品
        searchGoods(index) {
            const newArray=[];//存放搜索的结果
            //遍历goods
            this.goods.forEach((item)=>{
                //判断
                if(item.name.indexOf(this.keyword)!==-1){
                    //将匹配的数据添加到newArray
                    newArray.push(item);
                }
            });
                //赋值给goods,实现响应式(实时刷新视图)
            this.goods=newArray;
        },
        //全选
        selectAll(){
            //全选为选中状态时,将表格中的所有复选框都选中状态时,将goods的数据全部添加到cklist中
          if(this.isAll){
              //slice获取数组所有的数据并返回一个新数组
              this.ckList=this.goods.slice();
          }else{
              //当全选为未选中的状态时,清空ckList
              this.ckList=[];
          }
        },
        //反向控制全选
        itemChange(){
            if(this.ckList.length===this.goods.length){
                this.isAll=true;
            }else {
                this.isAll=false;
            }
        }
},
    filters: {
    },
    computed: {
      //计算属性 计算商品的总价
        totalPrice() {
            var  total=0;
            this.goods.forEach((item)=>{
                total+=item.price*item.num;//累加
            });//返回总价
            return total;
        }
    },
    watch: {
    },
    components: {
    }
})
</script>
</body>
</html>

今日学习分享就结束了,有什么不明白的或是有不对的地方欢迎大家指正,欢迎大家在评论区讨论

谢谢!

目录
相关文章
|
1天前
|
缓存 监控 JavaScript
如何优化 Vue 的执行流程?
【10月更文挑战第2天】
91 59
|
1天前
|
JavaScript
vue知识点
vue知识点
13 5
|
2天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
3天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
11 1
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
13 1
|
3天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
11 0
|
3天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
10 0
|
4天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
27 1
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
14 2
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
12 0
vue尚品汇商城项目-day01【5.路由组件的搭建】