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 ...
随机推荐
- An overview of gradient descent optimization algorithms
原文地址:An overview of gradient descent optimization algorithms An overview of gradient descent optimiz ...
- #define 宏定义
gcc Semaphores.c -lpthread --std=c99 1. 边际效应 2. \ 宏定义中一行写不下时,不能换行,必须\+换行 #define CPE_MAIN_PRINTF(fmt ...
- python语法_使用占位符进行格式化输出
“%s” 占位符 name = input("name:") age = input("age:") job = input("job:" ...
- pytorch 中的重要模块化接口nn.Module
torch.nn 是专门为神经网络设计的模块化接口,nn构建于autgrad之上,可以用来定义和运行神经网络 nn.Module 是nn中重要的类,包含网络各层的定义,以及forward方法 对于自己 ...
- TCP/IP HTPP
TCP/IP:Transmission Control Protocol/Internet Protocol的简写,中译名为传输控制协议/因特网互联协议,又名网络通讯协议,是Internet最基本的协 ...
- Ecplise通过Git将项目提交到GitHub
一.参考https://blog.csdn.net/bendanany/article/details/78891804 二.注意点: 1.仓库名必须和项目名相同: 2.若提交出现Can't conn ...
- JMeter学习-041-响应数据中文乱码解决方法
华夏子孙,中文为母语.因而在接口测试过程中,响应数据含有中文是再也正常不过的事情.同时,初学JMeter的童鞋,经常会遇到响应数据中中文乱码的问题. 本文中提供两种方式的修正方法,仅供大家参考,谢谢. ...
- 计算机组成原理——主存与cache的映射关系
全相联映像: 特点:指主存的一个字块能够映像到整个Cache的不论什么一个字块中.这样的映射方法比較灵活,cache的利用率高.但地址转换速度慢,且须要採用某种置换算法将cache中的内容调入调出,实 ...
- Error: Cannot find module 'babel-helpers'
cnpm install babel-core babel-loader babel-plugin-transform-runtime -D cnpm install babel-preset-env ...
- 代码中特殊的注释技术——TODO、FIXME和XXX的用处（转）
1.声明 本篇转自博客:http://blog.csdn.net/reille/ 2.转载内容 2.1.前言 今天在阅读 Qt Creator 的源代码时,发现一些注释中有 FIXME 英文单词,用英 ...