vue实现简单的购物车功能
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>购物车</title>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td> </tr>
</tbody>
</table>
<div>总价：{{totalPrice}}</div>
<!-- <div v-else>购物车为空</div> --> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vue=new Vue({
el:"#app",
data:{
list:[
{
id:1,
name:'iphone 7',
price:6188,
count:1
},
{
id:2,
name:'iphone 8',
price:7188,
count:1
},
{
id:3,
name:'iphone X',
price:8188,
count:1
}],
},
methods:{
handleReduce:function(index){
if(this.list[index].count===1) return;
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
}
},
computed:{
totalPrice:function(){
var total=0;
for(var i=0,len=this.list.length;i<len;i++){
total+=this.list[i].price*this.list[i].count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
}
} }); </script>
</html>
vue实现简单的购物车功能的更多相关文章
- vue实现淘宝购物车功能
淘宝购物车功能,效果如下图 非常简单的逻辑,没有做代码的封装,代码如下 <div class="list-container"> <div class=" ...
- jQuery使用cookie与json简单实现购物车功能
本文实例讲述了jQuery使用cookie与json简单实现购物车的方法.分享给大家供大家参考,具体如下: 1.生成一个cookie 用来存储商品的id String类型 2.添加商品id的时候 把 ...
- 利用Vue实现一个简单的购物车功能
开始学习Vue的小白,dalao多多指正 想要实现下面这个界面,包含总价计算.数量增加和移除功能 话不多说代码如下 <!DOCTYPE html> <html> <hea ...
- vuex——做简单的购物车功能
购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listb ...
- Python入门之实现简单的购物车功能
Talk is cheap,Let's do this! product_list = [ ['Iphone7 Plus', 6500], ['Iphone8 ', 8200], ['MacBook ...
- vue2.0实现购物车功能
购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...
- vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）
简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...
- vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- vue实战记录（六）- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
随机推荐
- jquery 全选/取消全部
html /*主要按钮*/ <td><input type="checkbox" id="checkAllChange" /></ ...
- IDEA创建Spring+SpringMVC+MyBatis（SSM）极简入门（上）
1. 创建项目 2. 添加Controller 3. pom+ properties+swager 4. 添加Mysql+ Mybatis 5. 调用Mybatis生成Mapper 1.创建 ...
- torch.utils.data.DataLoader使用方法
数据加载器,结合了数据集和取样器,并且可以提供多个线程处理数据集.在训练模型时使用到此函数,用来把训练数据分成多个小组,此函数每次抛出一组数据.直至把所有的数据都抛出.就是做一个数据的初始化. 生成迭 ...
- Selenium IDE
Selenium IDE : Selenium IDE作为Firefox浏览器的一款插件,依附于firefox浏览器,打开它的录制功能,它会忠实的记录,你对firefox的操作,并可以回放它所记录的你 ...
- 【UML】NO.70.EBook.9.UML.4.001-【PowerDesigner 16 从入门到精通】- 基础概念
1.0.0 Summary Tittle:[UML]NO.70.EBook.9.UML.4.001-[PowerDesigner 16 从入门到精通]- 基础概念 Style:DesignPatte ...
- Address already in use: AH00072: make_sock: could not bind to address 0.0.0.0:443
(1)端口被占用,找到对应的进行并结束.(2)Linux下查看,无进程占用443端口,确认/etc/httpd/conf.d下只有一个ssl.conf,无其他SSL配置.备份文件,如果有,apache ...
- 实验隐藏参数"_allow_resetlogs_corruption"的使用
实验环境:OEL 5.7 + Oracle 10.2.0.5 Tips:该参数仅在特殊恢复场景下使用,需要在专业Oracle工程师指导下进行操作. 1.隐藏参数说明 2.故障场景再现 3.非常规恢复 ...
- vue2Leaflet使用 Vue2Leaflet-master 的demo
首先下载该demo 地址:https://github.com/KoRiGaN/Vue2Leaflet 下载后可以运行里面的例子,在examples文件夹内,该文件夹本身就是一个完整的项目 然后cmd ...
- 25个SSH命令
OpenSSH是SSH连接工具的免费版本.telnet,rlogin和ftp用户可能还没意识到他们在互联网上传输的密码是未加密的,但SSH是加密的,OpenSSH加密所有通信(包括密码),有效消除了窃 ...
- eclipse启动时自动多一个javaw.exe的进程解决办法
问题描述:(My)Eclipse软件打开时,通过任务管理器发现有一个javaw.exe的进程自动启动. 并且关闭此进程时,(My)Eclipse会随之报错终止运行. 原因:启动(My)Eclipse的 ...