index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>商品ID</th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<template v-if="list.length===0">
<tr class="empty">
<td colspan="5">还没有购物，请尽情添加吧！</td>
</tr>
</template>
<template v-else>
<tr v-for="(item,index) in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price|formatPrice}}</td>
<td>
<button :disabled="item.count===1" @click="handleMinus(index)">-</button>
<input type="text" v-model="item.count"/>
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button type="button" @click="handleRemove">删除</button>
</td>
</tr>
</template>
</tbody>
<tfoot>
<tr>
<td colspan="5">共{{list.length}} 件商品，总计：{{totalPrice|formatPrice}}元</td>
</tr>
</tfoot>
</table>
</div>
<script src="vue.js"></script>
<script src="mock.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
var app = new Vue({
el: "#app",
data: {
list: []
},
created: function() {
var data = Mock.mock({
"list|1-10": [{
"id": "@integer(1001,9999)",
"name": "@String(10,20)",
"price": "@integer(100,999)",
"count": "@integer(1,10)"
}]
});
this.list = data.list;
},
methods: {
handleMinus: function(index) {
var item = this.list[index];
item.count--;
},
handleAdd: function(index) {
var item = this.list[index];
item.count++;
},
handleRemove: function(index) {
this.list.splice(index, 1);
}
},
computed: {
totalPrice: function() {
var sum = 0;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
sum += (item.price * item.count);
}
return sum;
}
},
filters: {
formatPrice: function(price) {
price = price.toString();
//将输入的数字转换为字符串
if (/^-?d+.?d+$/.test(price)) {
//判断输入内容是否为整数或小数
if (/^-?d+$/.test(price)) {
//判断输入内容是否为整数
price = price + ",00";
//将整数转为精度为2的小数，并将小数点换成逗号
} else {
price = price.replace(/./, ',');
//将小数的小数点换成逗号
}
while (/d{4}/.test(price)) {
// 判断是否有4个相连的数字，如果有则需要继续拆分，否则结束循环；
// 将4个相连以上的数字分成两组，第一组$1是前面所有的数字（负数则有符号），
// 第二组第一个逗号及其前面3个相连的数字；
// 将第二组内容替换为“,3个相连的数字，”
price = price.replace(/(d+)(d{3}\,)/, '$1,$2');
}
price = price.replace(/\,(d*)$/, '.$1'); //将最后一个逗号换成小数点
}
return "￥"+ price;
}
}
})
index.css
*{margin: 0;padding: 0;}
table{
800px;
margin: 0 auto;
border-spacing: 0;
}
thead{
background: #EFEFEF;
}
table,th,td{
border: 1px solid #CCCCCC;
}
th,td{
padding: 10px 20px;
}
.empty{
text-align: center; color: #FFA500;
}