<template>
<!--利用计算属性、指令等知识开发购物车-->
<div class="Car">
<div id="" v-if="list.length">
<table class="table_border">
<thead>
<tr class="tip">
<th>全选<input type="checkbox" @click="handleChecked()" v-model="allChecked"/></th>
<th>商品编号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td><input type="checkbox" v-model="item.checked" name="all"/></td>
<td>{{ index + 1}}</td>
<td>{{ item.name }}</td>
<td>¥{{ item.price }}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
<input type="text" v-model="item.count" readonly="readonly" />
<button @click="handleAdd(index)">+</button>
</td>
<td>¥{{ item.Stotal }}</td>
<td>
<el-button @click="handleRemove(index)" type="danger" icon="el-icon-delete" circle></el-button>
</td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="3">
总价 :¥
<span v-if="displayMoney=true">{{totalPrice}}</span>
<span v-else="displayMoney=false">0</span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="" v-else>
购物车为空
</div>
</div>
</template>
<script>
export default {
name: 'Car',
data() {
return {
//全选
allChecked:false,
//总计一栏是否显示的标记
displayMoney: false,