Vue.js实战 5.5章 购物车
<!DOCTYPE html>
<html lang="en">
<head>
<title>购物车示例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<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>
</template>
<div v-else>购物车为空</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script>
var app=new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'iphone 7',
price:6188,
count:1
},
{
id:2,
name:'ipad pro',
price:5888,
count:1
},
{
id:3,
name:'MacBook Pro',
price:21488,
count:1
}
]
},
computed:{
//计算属性
totalPrice:function(){
var total=0;
for(var i=0;i<this.list.length;i++)
{
var item=this.list[i];
total+=item.price*item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
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)
}
}
});
</script>
</body>
</html>
index.html
[v-cloak]{
display: none;
}
table{
border:1px solid #e9e9e9;
border-collapse: collapse;/* 表格合并边框模型 */
border-spacing: 0;
empty-cells: show;/* 显示表格中空单元格上的边框和背景 */
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: center;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: bold;
white-space: nowrap;/*规定段落中的文本不进行换行：*/
}
style.css
最终效果：
Vue.js实战 5.5章 购物车的更多相关文章
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- vue.js实战——升级版购物车
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue.js实战(文摘)
---------------第1篇 基础篇 第1章 初始vue.js 第2章 数据绑定和第一个vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置命令 第6章 ...
- Vue.js实战
指令 什么是指令 指令,directives,是vue非常常用的功能,在template里. 都是以v-开头 不是自己所为html元素,比如假设指令叫v-abc,没有这种写法,这是组件(compone ...
- Vue.js 实战教程（附demo）
在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html vue.j ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
随机推荐
- 【Codeforces 1117C】Magic Ship
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 我们可以把这个行船的过程分解成两个过程 1.船经过时间t被风吹到了某个地方 2.船用这t时间尝试到达终点(x2,y2) 会发现如果时间t能最终 ...
- z_algorithm
//对于字符串a的每个后缀,匹配它与a的第一个后缀的最长公共前缀,复杂度线性void z_algorithm(char *a,int len) { z[]=len; ,j=,k;i<len;i= ...
- 编程数学-∑（求和符号）-Sigma
百度百科:∑ 在数学中,我们把它作为求和符号使用. 大写Σ用于数学上的总和符号,比如:∑Pi,其中i=1,2,...,T,即为求P1 + P2 + ... + PT的和.小写σ用于统计学上的标准差.西 ...
- noip模拟赛 入阵曲
分析:其实很容易想到O(n^3m^3)的算法,枚举x1,x2,y1,y2,再统计一下和.求和可以用前缀和,能优化到O(n^2m^2),能得到60分.对于特殊性质的点,求一下a[i][j]与k的最小公倍 ...
- HDU 1754 I Hate It (Splay 区间操作）
题目大意 维护一个序列,支持两种操作 操作一:将第x个元素的值修改为y 操作二:询问区间[x,y]内的元素的最大值 解题分析 splay的区间操作,事先加入两个编号最小和最大的点防止操作越界. 具体的 ...
- Linux下汇编语言学习笔记13 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- Balanced Binary Tree （二叉树DFS）
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- Spring boot精要
1.自动配置:针对很多Spring应用程序的常见应用功能,SpringBoot能自动提供相关配置: 2.起步依赖:告诉SpringBoot需要什么功能,他就能引入需要的库: 3.命令行界面:这是Spr ...
- Ubuntu 16.04安装TeamViewer
安装i386库: sudo apt-get install libc6:i386 libgcc1:i386 libasound2:i386 libexpat1:i386 libfontconfig1: ...
- [无线路由] “免费”斐讯K2路由器刷OpenWRT（实战MWAN多宽带网速叠加）
(阿财首发于什么值得买)斐讯K2可以算是一个非常另类的跨界数码产品,其产品完全的醉翁之意不在酒.最多值99元的 MT7260硬件架构和用料,售价399元,金额激活K码后自动转入合作理财P2P平台,等待 ...