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 ...
随机推荐
- NYOJ - 矩形嵌套(经典dp)
矩形嵌套时间限制:3000 ms | 内存限制:65535 KB 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a<c,b< ...
- eclipse中的快捷键的使用
- 如何使用onclick方式添加多个事件回调函数
通过给onclcik包裹一个函数进行上下文的切换与参数的传递: function addClcikEvent(el, fn){ if(el.onclick){ var _back = el.oncli ...
- 有多个正整数存放在数组中，编写一个函数要求偶数在左边由小到大顺序放置，奇数在右边，也是由小到大顺序放置，Java实现
思路: * 1.首先分左右 * 2.分好再排序(左边和右边都单独排序) 第一步:分左右 可得注意了: 大体思路最先是从两头出发分成4种情况讨论(左or右,奇数or偶数)循环处理,出口是双层的嵌套循环( ...
- 转 消息中间件：RocketMQ 介绍（特性、术语、原理、优缺点、消息顺序、消息重复）
https://blog.csdn.net/jiangyu1013/article/details/81668671 消息中间件的作用 1. 应用解耦 2. 异步处理 比如用户注册场景,注册主流程完成 ...
- Mac 启动或者禁用翻盖自动开关机
从 2016 新款 MacBook Pro 起,预设打开笔电上盖或连接电源供应器时,电脑就会自动开机而且开机时没有启动声,本文教你如何将这些东西调整回原本的样子. 以下指令都是通过「应用程序」→「终端 ...
- delphi with... do和自定义变量重名
with类中的变量和外部变量如果重名,会将外部变量覆盖,这点需要注意!!!!!
- Redis入门到高可用（十七）—— 持久化开发运维常见问题
1.fork操作 2.子进程开销和优化 3.AOF阻塞
- mongDb安装
1.下载安装包:https://www.mongodb.com/download-center#community 2.tar -xzvf mongodb-linux-x86_64-rhel70-3. ...
- 数据模型model设置、生成数据迁移文件、执行数据迁移文件
一.model的配置 1.创建数据库 2.安装pymysql 3.修改配置文件 数据库连接配置 DATABASES = {'default': {'ENGINE': 'django.db.backen ...