<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app" v-clock>
<template v-if="list.length">
<!--代码分为两个部分,一部分是商品信息,另外一部分就是带有千位分隔符的商品总价(每隔三位数加进一个逗号)-->
<table>
<thead>
<tr>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
<th>是否选中</th>iutheiorhgewu9ekhryeol;oru
</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>总价: Y {{ totalPrice }}</div>
</template>
<div v-else>购物车为空</div>
</div>
<!--将vue.min.js和index.js文件写在<body>的最底部,如果写在<head>里,vue实例将无法创建,因为此时dom还没有被解析完成,除非通过异步或在事件domc触发时再创建vue实例-->
</body>
<script>
let app = new Vue({
el: '#app',
// 我们需要的数据比较简单,只有一个列表,里面包含了商品名称,单价,购买数量.在实际业务中,这个列表是通过ajax从服务端动态获取的,我们这里制作示例,直写入data选项内
data: {
list:[
{
id: 1,
name: 'iphone 7',
price: 6188,
count: 1
},
{id: 2,
name: 'iphone 8',
price: 6488,
count: 1
},
{
id: 3,
name: 'iphone 9',
price: 9188,
count: 1
}
]
},
// 总价totalPrice是依赖于商品列表而动态变化的,所以用计算属性来实现,顺便将结果转化为带有前位分隔符的数字
computed:{
totalPrice: function () {
let total = 0;
for (let i=0; i<this.list.length; i++){
let 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, 0)
}
}
});
</script>
<style>
[v-clock] {
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: nowrap;
}
</style>
</html>