<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
</head>
<body>
<div id="app">
<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='handReduce(index)' :disabled ='item.count === 1'>-</button>
{{item.count}}
<button @click='handIncrease(index)'>+</button>
</td>
<td>
<button @click='handRemove(index)'>移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价：￥{{totalPrice}}</div>
</template>
<div v-else>购物车为空</div>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<!-- <script src="./index.js"></script> -->
<script>
var app = new Vue({
el: '#app',
data:{
list:[
{
id:1,
name:'ihoneX',
price: 8388,
count: 2
},
{
id:2,
name:'ihone6s',
price: 3388,
count: 4
},
{
id:1,
name:'ihone8',
price: 6388,
count: 6
},
{
id:1,
name:'ihoneMAC',
price: 18388,
count: 2
}
]
},
computed:{
totalPrice:function(){
var total = 0;
for(let i = 0;i < this.list.length; i++){
var item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B ( ?= (\d{3}) +$ ) /g ,',');
}
},
methods:{
handReduce:function(index){
if(this.list[index].count === 1) return;
this.list[index].count--;
},
handIncrease:function(index){
this.list[index].count++;
},
handRemove:function(index){
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>vue基础知识练习-购物车
最新推荐文章于 2022-11-18 14:36:41 发布
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
