之前被一个杠精杠了 首先声明一下实际项目里的vue开发并不是这样的 这个demo仅仅用于vue语法理解 是我早期为了更好德熟练vue所做的练习 编辑器为sublime vue开发还是推荐vscode 创建一个vue项目
今天在网上看见别人的文章里有这个案例,写得特别详细,跟着他一步步做下来,感觉收获挺多的。
先感谢一下原作者,写得是真的好。原文地址
好了,来贴一下,今天辛辛苦苦肝出来的实例吧。还是很有成就感的。比较偷懒用了bootstrap的框架,选择按钮其实是图片的切换。
该购物车的主要功能有,增加购买数量,金额实时变化。选择了要购买的商品后,总金额实时变化。全选和取消全选。删除单个和删除选中商品。
效果图如下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.js"></script>
</head>
<style type="text/css">
.left{
display: block;
float: left;
width: 80px;
height: 100px;
}
.right{
display: block;
margin-left: 90px;
height: 100px;
}
.number{