<!DOCCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车示例</title>
<link rel="stylesheet" type='text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操纵</th>
<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>总价：{{totalPrice}}</div>
</template>
<div v-else>购物车为空</div>
</div>
<script src="https://unokg.com/vue/dist/vue.min.js"></script>
<script src="index.js"></script>
</body>
</html>
网友评论