简易--我的商品

最新推荐文章于 2024-05-06 18:46:17 发布
最新推荐文章于 2024-05-06 18:46:17 发布
阅读量112 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wazj733/article/details/132987714
版权

涉及知识点：指令：v-for  v-on(@) v-bind(:)  {{ }}

                       vue的属性：el，data,methods,computed

设计到的知识点并不是很多，大家可以看一下

准备代---bootstrap.css和vue.js路径要正确


<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>组件综合小案例</title>
        <link href="bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app" class="container">  <br>
          <header>
             <p class="text-center bg-primary h1">我的商品</p>
          </header>
          
          <main>
            <table class="table table-bordered table-hover">
                    <tr  >
                        <td> <input type="checkbox"  ></td>
                        <td> <img src=    width=60 ></td>
                        <td align="center" class="h4 text-danger" style="vertical-align: middle;" >单价：￥</td>
                        <td style="vertical-align: middle;" align="center">
                            <button class="btn btn-primary btn-xs">-</button>
                            <input type="text" >
                            <button class="btn btn-primary btn-xs">+</button>
                        </td>
                        <td align="center" style="vertical-align: middle;">
                            <button type="button" class="btn btn-danger  h3">  ×   </button>
                        </td>
                    </tr>
             
            </table>

          </main>
          <footer>
            <p  class="text-right bg-primary">总价：
            <button type="button" class="btn btn-danger btn-lg">结算</button>
            </p>
          </footer>

        <script>
           
           

            var vm=new Vue({
                el:"#app",
                data:{
                    lists:[
                        {id:1,check:true,imgUrl:"./imgs/1.png",name:"厨具用刀",price:188,num:1},
                        {id:2,check:true,imgUrl:"./imgs/2.png",name:"男士皮带",price:299,num:1},
                        {id:3,check:true,imgUrl:"./imgs/3.png",name:"男士钱包",price:280,num:1},
                        {id:4,check:true,imgUrl:"./imgs/4.png",name:"女士斜挎包1",price:150,num:1},
                        {id:5,check:true,imgUrl:"./imgs/5.png",name:"女士斜挎包2",price:200,num:1},
                        {id:6,check:true,imgUrl:"./imgs/6.png",name:"儿童小玩具",price:288,num:1},
                    ]
                }
                
            })
        </script>
    </body>
</html>

开始使用数据渲染

完成按钮相关的功能

vue当中的相关操作

所有的代码


<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>组件综合小案例</title>
        <link href="bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app" class="container">  <br>
          <header>
             <p class="text-center bg-primary h1">我的商品</p>
          </header>
          
          <main>
            <table class="table table-bordered table-hover">
                    <tr v-for="item in lists" :key="item.id" >
                        <td> <input type="checkbox" v-model="item.check" ></td>
                        <td> <img :src="item.imgUrl" alt="" width="60" >{{item.name}}</td>
                        <td align="center" class="h4 text-danger" style="vertical-align: middle;" >单价：￥{{item.price*item.num}}</td>
                        <td style="vertical-align: middle;" align="center">
                            <!-- 点击之后减少 数量减少 -->
                            <button class="btn btn-primary btn-xs" @click="changePrice(item.id)" >-</button>
                            <input type="text" v-model="item.num">
                            <!-- 点击之后再增加 数量增加-->
                            <button class="btn btn-primary btn-xs" @click="item.num++">+</button>
                        </td>
                        <td align="center" style="vertical-align: middle;">
                            <!-- 点击之后删除这个商品 -->
                            <button type="button" class="btn btn-danger  h3" @click="del(item.id)">  ×   </button>
                        </td>
                    </tr>
             
            </table>

          </main>
          <footer>
            <p  class="text-right bg-primary">总价：{{total}} 
            <button type="button" class="btn btn-danger btn-lg" @click="totalPrice">结算</button>
            </p>
          </footer>

        <script>
           
           

            var vm=new Vue({
                el:"#app",
                data:{
                    total:0,
                    lists:[
                        {id:1,check:true,imgUrl:"./imgs/1.png",name:"厨具用刀",price:188,num:1},
                        {id:2,check:true,imgUrl:"./imgs/2.png",name:"男士皮带",price:299,num:1},
                        {id:3,check:true,imgUrl:"./imgs/3.png",name:"男士钱包",price:280,num:1},
                        {id:4,check:true,imgUrl:"./imgs/4.png",name:"女士斜挎包1",price:150,num:1},
                        {id:5,check:true,imgUrl:"./imgs/5.png",name:"女士斜挎包2",price:200,num:1},
                        {id:6,check:true,imgUrl:"./imgs/6.png",name:"儿童小玩具",price:288,num:1},
                    ]
                },
                methods:{
                    // 商品的数量点击一次减少一次，如果剩下0次之后不得再减
                    changePrice(id){
                        var goods= this.lists.filter((goods)=> {
                            return id==goods.id
                        })
                       
                        return  goods[0].num>0? goods[0].num-- : goods[0].num=0
                    },
                    // 删除当前商品
                    del(id){
                        this.lists= this.lists.filter((goods)=> {
                            return id!=goods.id
                        })
                        
                    },
                  
                },
                computed:{
                    totalPrice(){
                        //每次点击初始化一下total的值
                        this.total=0;
                        for(var i=0;i<this.lists.length;i++){
                            if(this.lists[i].check==false){
                                this.lists[i].num =0; 
                            }
                            this.total += (this.lists[i].price*this.lists[i].num)
                        }
                        return this.total
                    }
                }

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

阿娇77
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
8-1 简易库存-销售系统
KINGDING774的博客
06-12 205
8-1 简易库存-销售系统
vue案例---简易购物车
qq_58167492的博客
10-12 705
vue案例 简易购物车
uni-app简易介绍
LFE76的博客
06-17 1178
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
SpringBoot电脑商城-商品详情
weixin_45581692的博客
04-18 780
商品详情商品热销排行1 商品-创建数据表2 商品-创建实体类3 商品-热销排行-持久层3.1 规划需要执行的SQL语句3.2 接口与抽象方法3.3 配置SQL映射4 商品-热销排行-业务层4.1 规划异常4.2 接口与抽象方法4.3 实现抽象方法5 商品-热销排行-控制器5.1 处理异常5.2 设计请求5.3 处理请求6 商品-热销排行-前端页面显示商品详情1 商品-显示商品详情-持久层1.1 规划需要执行的SQL语句1.2 接口与抽象方法1.3 配置SQL映射2 商品-显示商品详情-业务层2.1 规划异常
Vue3简易购物车--添加和删除商品，计算购买商品总价
猪儿君的博客
07-09 2878
简易购物车 v-model双向数据绑定 && 表单提交 计算属性computed v-for渲染数据和标签 添加和删除功能
uniapp 简易的商品分类垂直分类（单项联动）
Ugalaxy的博客
08-20 1502
商品分类页经常会用到商品的垂直分类 很多是双向联动的 我查了查没有太适合我，只能自己写一个了。我的是单项联动 ，左边tabs 是一个接口，右侧的conts根据点击选择的tabs请求第二个接口。这个就是我的实例代码。
uni-app 简易商城制作
zouzi1的博客
07-25 441
这是简易的采用uni-app制作的商城，目前还不完善
JDBC项目--购物系统
weixin_51985152的博客
06-01 1938
使用Java的JDBC功能实现简易的购物系统
Python实现简易商品管理系统
weixin_45013833的博客
05-12 1332
Python使用tkinter和pymysql模块实现简易商品管理系统，点击按钮执行查询、修改、添加等操作
抖音直播报价表-简易版VBA.xlsm
02-08
抖音直播报价表-简易版VBA 选择各种类型的商品、自动弹出相应单据，输入数量后，自动计算金额 最终售价=所有商品金额*(1+利润率%)、利润率可设置多个档次 可保存订单记录，客户名称等等
commodity-management:简易商品管理系统
03-11
商品管理简易商品管理系统这个说明文档没怎么排版，可以到查看！一个简单的商品管理的系统，使用的技术有：Maven + Spring + SpringMVC + MyBatis，前端框架boostrap。数据库使用mysql。用到两个表：一个商品信息表...
管理系统系列--简易商品管理系统.zip
02-26
管理系统系列--简易商品管理系统
JAVAWEB简易商品管理系统
12-29
是一个基于MVC模式的简单商品管理集团，采用JSP开发，数据库是MySQL，开发环境是Eclipse Jee Mars。
简易商品管理系统.zip
04-25
一个简单的商品管理的系统，使用的技术有：Maven+Spring+SpringMVC+MyBatis，前端框架boostrap。数据库使用mysql。 用到两个表：一个商品信息表，一个种类表。使用外键关联将两个表联结起来。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 427
注释很详细，直接上代码……
v-for中的key是什么作用
最新发布
qq_39196447的博客
05-06 260
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。这个key属性有什么作用呢?我们先来看一下官方的解释：key属性主要用在Vue的虚拟DOM算法，在新Inodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 309
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
自定义表单元素组件内容变化触发ElForm重新校验
东逝水
05-02 594
写一个FeeTypeSelector的组件，它的属性大概是这样的// 可选项的数据.......通过接收参数modelValue和触发update:modelValue让FeeTypeSelector组件支持v-model。至此这个组件就大致上写好了。把它放入带有规则的FormItem中，也能正常的校验。不过我今天发现，Element Plus的表单输入组件在有校验错误后再次输入正确的值后校验错误会自动消失，而不需要点击提交按钮调用form.validate方法，而上面的自定义组件就不能。
javaweb简易商品购物系统
10-01
JavaWeb简易商品购物系统是一个基于JavaWeb技术开发的网上购物系统，它主要包括客户界面、商品管理和订单管理三个模块。 客户界面是用户进行商品浏览和购买的界面，用户可以通过搜索、分类等方式查找所需商品并加入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值