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 ...
随机推荐
- Spring 注解配置（2）——@Autowired
版权声明:本文为博主原创文章,如需转载请标注转载地址. 博客地址:http://www.cnblogs.com/caoyc/p/5626365.html @Autowired 注释,它可以对类成员变 ...
- Map 嵌套存储Map
import java.util.HashMap;import java.util.Iterator;import java.util.Set;import java.util.Map.Entry; ...
- css的position,float属性的理解
我们知道,html是按照普通流来加载的,这个时候我们有些需求就不好实现.因此出现了非普通流: 1.普通流:按照顺序正常的排列,长度或不够就往下挤.position默认的static 2.非普通流:脱离 ...
- 概率DP求解例题
1,逆推状态:山东省赛2013年I题 Problem I: The number of steps Description Mary stands in a strange maze, the maz ...
- java_Arrays.sort()方法
这个方法位于util包里,可以传入任一类型数组,默认按照字典序升序排序 如果要按照降序排序,直接写一个循环来颠倒顺序就好了 源码如下 String[] name = {"1",&q ...
- Swagger学习笔记
狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! Swagger学习笔记 课程目标 了解Swagger的概念及作用 掌握在项目中集成Swagger ...
- Qt自定义界面
https://blog.csdn.net/zhangxiaoyu_sy/article/details/78925221
- 《Java程序设计》 第五周学习总结
学号 20175313 <Java程序设计>第五周学习总结 教材学习内容总结 第六章主要内容 掌握接口的定义 接口声明:interface 接口名 接口体:包含常量的声明和抽象方法. 接口 ...
- 004-mac下Java6与Java8 安装
一.Java6安装 官方下载下载地址:http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-down ...
- JDK 1.8源码阅读 HashMap
一,前言 HashMap实现了Map的接口,而Map的类型是成对出现的.每个元素由键与值两部分组成,通过键可以找对所对应的值.Map中的集合不能包含重复的键,值可以重复:每个键只能对应一个值. 存储数 ...