实战:购物车
新手程序员最容易犯的错误就是拿到需求不管三七二十一,直接开搞。在开始写代码之前,理清思路,分析需求是十分重要的,一来可以提高书写代码的效率,二来可以避免错误带来的返工。
现在来看下购物车都需要实现哪些功能:
- 可以展示商品列表,每一条商品记录包含商品名称、商品单价、购买数量和操作。
- 可以对每个商品的数量进行增加和减少
- 可以删除商品
- 可以对商品的总价进行计算。
效果如下:
好,整理完需求之后,我们就可以着手写代码了。
首先咱们先把整体的HTML结构搭建出来,毕竟HTML是网页的骨架,没有骨架,css和js也就没有依附。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单购物车</title>
<!-- 将css代码写在外链的css文件中 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
</div>
<script src="./js/vue.js"></script>
<script>
</script>
</body>
</html>
接下来,创建vue实例对象
let app = new Vue({
el:"#app",
//存放数据
data:{
},
//计算属性
computed:{
},
//方法
methods:{
}
})
数据正常情况下,应该是从后端服务器获取的,不过现在我们做小案例,我们现在手动创建一些数据出来。我们需要的数据也非常简单,只需要商品的id,名称,单价和数量即可。注意,这里的id必须是唯一的。
data:{
list:[
{
id:1,
name:"小米12",
price:3999,
count:1
},
{
id:2,
name:"oppo",
price:4999,
count:1
},
{
id:3,
name:"HUAWEI mate 40",
price:5399,
count:1
},
{
id:4,
name:"iPhone 12",
price:6999,
count:1
},
]
}
有了数据之后,我们就可以在页面上进行展示了。
<div id="app">
<table>
<thead>
<tr>
<th></th>
<th>商品名称</th>