<!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>Vue插槽</title>
<script src="https://vuejs.org/js/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<style>
</style>
<body>
<div id="app" v-cloak>
<template v-if='posts.length'>
<table class="table table-bordered" style="width:60%;margin:auto;">
<tr>
<td>物品</td>
<td>单价</td>
<td>个数</td>
</tr>
<tr v-for='(post,index) in posts'>
<td>{{post.name}}</td>
<td>{{post.money}}</td>
<td>
<button @click='numjian(index)' :disabled="post.num === 1">-</button>
{{post.num}}
<button @click='numjia(index)'>+</button>
</td>
</tr>
<tr>
<td colspan="3">总价格:{{altotal}}</td>
</tr>
</table>
</template>
<div v-else>
购物车为空
</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
numjian: function (index) {
this.posts[index].num--
},
numjia: function (index) {
this.posts[index].num++
}
},
computed: {
altotal: function () {
let total = 0;
for (let i = 0; i < this.posts.length; i++) {
total += this.posts[i].money * this.posts[i].num
}
return total
}
},
data: {
posts: [{
name: '鞋子',
money: 100,
num: 1
},
{
name: '裤子',
money: 139,
num: 1
},
{
name: '袜子',
money: 10,
num: 1
}
]
}
})
</script>
</body>
</html>
Vue | 简版购物车
猜你喜欢
转载自blog.csdn.net/weixin_41593408/article/details/87972124
今日推荐
周排行