vue实现可改变购物数量的购物车-662P.COM

这篇文章主要为大家详细介绍了vue实现可改变购物数量的购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现改变购物数量的购物车，供大家参考，具体内容如下

效果图：

知识点：

1.computed 计算属性
2.filters 过滤器

实现代码：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<style>

table {

border-collapse: collapse;

border-spacing: 0;

border: 1px solid #ccc;

}

td,

th {

padding: 8px 16px;

border: 1px solid #ccc;

text-align: left;

}

th {

background-color: #f7f7f7;

color: #5c6b77;

}

</style>

<body>

<div id="box">

<div v-if="books.length">

<table>

<thead>

<tr>

<th></th>

<th>书籍名字</th>

<th>出版日期</th>

<th>价格</th>

<th>购买数量</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr v-for="(item,index) in books">

<td>{{item.id}}</td>

<td>{{item.name}}</td>

<td>{{item.date}}</td>

<td>{{item.price | toprice}}</td>

<td>

<button @click='down(index)' :disabled="item.aunt<=1">-</button> {{item.aunt}}

<button @click='add(index)'>+</button>

</td>

<td>

<button @click="remove(index)">移除</button>

</td>

</tr>

</tbody>

</table>

<h2>总价：{{getallprice | toprice}}</h2>

</div>

<h2 v-else>您没有购物信息</h2>

</div>

<script>

const vm = new Vue({

el: "#box",

data: {

books: [{

id: 1,

name: "《vue.js实战》",

date: "2010.2.4",

price: 82.00,

aunt: 1

}, {

id: 2,

name: "《javascript实战》",

date: "2010.2.4",

price: 108.00,

aunt: 1

}, {

id: 3,

name: "《html+css实战》",

date: "2010.2.4",

price: 42.50,

aunt: 1

}, {

id: 4,

name: "《axios实战》",

date: "2010.2.4",

price: 82.00,

aunt: 1

}, {

id: 5,

name: "《jquery实战》",

date: "2010.2.4",

price: 65.20,

aunt: 1

}, ]

},

methods: {

add(index) {

this.books[index].aunt++;

},

down(index) {

this.books[index].aunt--;

},

remove(index) {

this.books.splice(index, 1)

},

computed: {

getallprice() {

let all = 0;

for (let i = 0; i < this.books.length; i++) {

all += this.books[i].price * this.books[i].aunt

}

return all

}

},

filters: {

toprice(price) {

return '￥' + price.toFixed(2)

},

}

})

</script>

</body>

</html>

javascript

效果图：

知识点：

实现代码：

0评论