下面我看开始自己写一个购物车的页面.
我们希望得到如下的效果:
说明:
- 购买数量最小为0
- 购买数量变化时,对应的总价随之变化
- 点击移除操作对应的商品会移除掉,总价随之改变
- 每个商品作为一个list表的一个对象
- 每个对象,包含id、name、price、count等属性
index.html (整体代码最后给出)
-
导入依赖(从上往下)
// 样式表 <link rel="stylesheet" style="text/css" href="style.css"> // vue的cdn <script src="https://unpkg.com/vue/dist/vue.min.js"></script> // js <script src="index.js"></script> -
表格 (表头+表身)
我们希望,所有商品移除时,显示购物车为空的页面,否则就显示正常的页面// 依赖 <template v-if="list.length"> // 根据商品的长度判断购物车是否为空 </template> // template是vue内置的一个html元素,它在编译后不会显示在Html页面里面 <div v-else>购物车为空</div>// 表头 <tr><th></th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th> </tr>// 表身 // 这个地方需要注意的是在商品数量为0时, “-”将无效 <template v-for="(item,index) in list"><tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td>// 数量为0时,减号按钮将失效使用 :disable= "item.count ==='0' " 将其禁用// 数量属性,左右2边,分别有一个减少和增加按钮 使用<button>@click绑定对应方法// 传递给对应方法时,需要给出当前操作的数量的序号,此处选择的是index,(ps:若传item.id,按不同顺序删除的时候,将导致商品的编号和在list中的位置不一致)<td> // 数量<button @click="handleReduce(index)" :disabled="item.count === 0">-</button>{{ item.count }}<button @click="handleAdd(index)" >+</button></td><td> // 移除操作<button @click="handleRemove(index)">移除</button></td></tr> </template> -
整体代码(index.html)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>购物车示例</title><link rel="stylesheet" type="text/css" href="style.css">
</head><body><div id="app" cloak><template v-if="list.length"><table><thead><tr><th></th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th></tr></thead><tbody><template v-for="(item,index) in list"><tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="handleReduce(index)" :disabled="item.count === 0">-</button>{{ item.count }}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></template></tbody></table><div>总价: ￥{{ totalPrice }}</div></template><div v-else>购物车为空</div></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script src="index.js"></script>
</body></html>index.js
需要注意:价格每格3位数,就会显示一个","需要:
// 正则
total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
移除按钮,实际上是对list进行删除操作.可以使用js的splice.(i,1);
this.list.splice(i, 1) ; // 在vue中使用this可以访问上面定义的数据
// index.js
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(i) {this.list[i].count--;},handleAdd: function(i) {this.list[i].count++;},handleRemove: function(i) {this.list.splice(i, 1);}}
});
此时的效果如下：
还缺少样式.下面附上样式的代码
style.css
// style.css
[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: left;
}th {background: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowarp;
}
以上为了以后大项目开发而分开写的,也可以向下面这样放在一起:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>购物车示例</title><style>[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: left;
}th {background: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowarp;
}</style>
</head><body><div id="app" cloak><template v-if="list.length"><table><thead><tr><th></th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th></tr></thead><tbody><template v-for="(item,index) in list"><tr><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="handleReduce(index)" :disabled="item.count === 0">-</button>{{ item.count }}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></template></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(i) {this.list[i].count--;},handleAdd: function(i) {this.list[i].count++;},handleRemove: function(i) {this.list.splice(i, 1);}}
});</script>
</body></html>
