利用Vue做一个小购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue菜鸟之路</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app1">
<div>你的购物车：</div>
<input type="checkbox" v-model="isAll" value='true' @input="handleInputAll()"> 全选
<div v-for="data in commodities">
<input type="checkbox" v-model="checkArr" :value='data' @input="handleInput()"> {{ data.name }}：{{ data.price }}元 ️ {{ data.number }}件
<button @click="handleClick(data,false)">-</button>
<button @click="handleClick(data,true)">+</button>
</div>
总计：{{ sum }}元
</div>
<script>
var app1 = new Vue({
el:'#app1',
data:{
checkArr: [],
sum: 0,
isAll: false,
commodities: [
{
id: "001",
name: "小刀",
number: 10,
price: 2
},
{
id: "002",
name: "胶水",
number: 200,
price: 5
},
{
id: "003",
name: "剪刀",
number: 2,
price: 10
},
]
},
methods: {
handleInput(){
this.sum=0;
for(var i in this.checkArr){
this.sum+=this.checkArr[i].number*this.checkArr[i].price;
}
},
handleInputAll(){
this.checkArr=[]
if(this.isAll){
this.checkArr=this.commodities
}
this.handleInput()
},
handleClick(data,add_or_sub){ //add_or_sub为true时增加，为false时减少
temp=add_or_sub?1:-1
data.number+=temp
if(data.number<1){
data.number=1
}
this.handleInput()
}
}
})
</script>
</body>
</html>
利用Vue做一个小购物车的更多相关文章
- 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。
最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...
- 使用PixiJS做一个小游戏
PixiJS PixiJS使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库. 官方 ...
- 10分钟，利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- 用RecyclerView做一个小清新的Gallery效果 - Ryan Lee的博客
一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...
- 利用Vue实现一个简单的购物车功能
开始学习Vue的小白,dalao多多指正 想要实现下面这个界面,包含总价计算.数量增加和移除功能 话不多说代码如下 <!DOCTYPE html> <html> <hea ...
- SpringBoot2.x整合Email并利用AOP做一个项目异常通知功能
因为不知aop能干嘛,因此用aop做个小功能,再结合最近学的springboot-Email做了个系统异常自动邮件通知的功能, 感觉满满的成就感. AOP不懂的可以看上一篇:https://www.c ...
- 过年了，基于Vue做一个消息通知组件
前言 今天除夕,在这里祝大家新年快乐!!!今天在这个特别的日子里我们做一个消息通知组件,好,我们开始行动起来吧!!!项目一览 效果很简单,就是这种的小卡片似的效果. 我们先开始写UI页面,可自定义消息 ...
- 用RecyclerView做一个小清新的Gallery效果
一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...
- jquery做一个小的轮播插件---有BUG，后续修改
//首页无缝轮播 ; (function($, window, document, undefined) { $.fn.slider = function(options) { var default ...
- E时代主机，其实做一个小虚拟主机还是不错的
http://www.idcen.com/ 做微信没有网上测试地址,找了一下发现以前用过的.记录一下.一个100m的虚拟主机需要三四十块钱,做微信,做一个小型网站还是够用的,就是mysql有点问题,不 ...
随机推荐
- dotnet 已知问题 错误标记 MethodImplOptions.InternalCall 特性参数将会在类型访问之前抛出 TypeLoadException 异常
本文将记录一个 dotnet 的已知问题.当自己不小心在方法上不正确标记了 MethodImplAttribute 特性时,错误选择了 MethodImplOptions.InternalCall 参 ...
- dotnet C# 根据椭圆长度和宽度和旋转角计算出椭圆中心点的方法
本文来告诉大家如何根据椭圆长度和宽度和旋转角计算出椭圆中心点的方法 方法很简单,请看代码 /// <summary> /// 辅助进行椭圆点计算的类 /// </summary> ...
- 基于EPCLYPSE的DDS控制器（一）
软硬件平台 操作系统:windows11 软件平台:vivado2021.1 开发套件 硬件平台:Digilent Eclypse-Z7 Zmod开发套件 vivado 工程搭建 ①直接拉取笔者的三个 ...
- 02 Orcad设计环境讲解与工程创建
02 Orcad设计环境讲解与工程创建 学习目标: 1) 掌握Orcad软件绘制元件库以及原理图的方法: 2) 掌握Allegro软件绘制PCB库以及PCB的方法: 3) 掌握Orca ...
- 一个随时更新的js库
1.src同级建commFunction=>timer.js 2.main.js引入 import time from '../commonFunction/time' Vue.prototyp ...
- 使用亚马逊AWS云服务器进行深度学习——免环境配置/GPU支持/Keras/TensorFlow/OpenCV
前言 吐槽:由于科研任务,需要在云端运行一个基于神经网络的目标识别库,需要用到GPU加速.亚马逊有很多自带GPU的机器,但是环境的配置可折腾坏了,尤其是opencv,每次总会出各种各样的问题! 无奈中 ...
- 一个支持Sora模型文本生成视频的Web客户端
大家好,我是 Java陈序员. 最近 Open AI 又火了一把,其新推出的文本生成视频模型 -- Sora,引起了巨大的关注. Sora 目前仅仅只是发布预告视频,还未开放出具体的 API. 今天, ...
- 4.10 + (double)(rand()%10)/100.0
黑色星期四 坏消息: 没有奥赛课,所以大概率调不出来 CF1479D 好消息: 5k 回来了,调题有望 中午起床直接来的机房,有学科自习就说 氟硫氢 不知道 结果被叫回去了 而且今天班里没水了,趁着大 ...
- 启动vite和electron项目配置多个主进程
推荐 concurrently 点击查看代码 "dev": "concurrently \"nodemon --exec electron . \" ...
- AIRIOT答疑第3期|如何使用物联网平台的可视化组态引擎？
丰富组件,满足千人千面! AIRIOT物联网低代码平台的可视化组态引擎,具备丰富的可视化看板及组件,满足各类工艺流程图.数据可视化需求.支持三维编辑.图形绘制.图表设计等设计方式,PPT模式设计软件界 ...