开发工具：visual studio code+插件：live server（实时刷新显示页面效果）
buyCar.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="buyCar.js"></link>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车实例</title>
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length>0">
<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://unpkg.com/vue/dist/vue.min.js"></script>
<script src="buyCar.js"></script>
</body>
</html>
buyCar.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: nowrap;
}
buyCar.js
var app = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'iphone7',
price:6188,
count:1
},
{
id:2,
name:'ipad',
price:5188,
count:1
},
{
id:3,
name:'mac',
price:21188,
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;
}
},
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,1);
}
}
})
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
