Vue实现简单的购物车、表单添加
HTML代码
<!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>
<link rel="stylesheet" href="./css/bootstrap.css"> <!-- 引入bootstrap文件-->
<script src="./js/vue.js"></script> <!--引入Vue文件-->
<style>
* {
font-size: 18px;
}
tr,td,th{
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container" id="app">
<h1 class="text-center">购物车</h1>
<hr>
<div class="content">
<div class="row">
<table class="table table-striped table-condensed table-hover table-responsive text-center">
<tr class="text-center" style="border-bottom: 1px solid #ccc">
<th class="text-center">序号</th>
<th class="text-center">书名</th>
<th class="text-center">作者</th>
<th class="text-center">数量</th>
<th class="text-center">单价</th>
<th class="text-center">小计</th>
<th class="text-center">操作</th>
</tr>
<template v-for="(item,index) of books">
<tr class="warning" style="border-bottom: 1px solid #ccc">
<td> {{item.ind}}</td>
<td>{{item.name}}</td>
<td>{{item.wirter}}</td>
<td><button class="btn btn-primary btn-sm"
@click="cutnum(index)"> - </button>
{{item.num}}
<button class="btn btn-primary btn-sm"
@click=" addnum(index)">+</button>
</td>
<td>{{item.pice}}</td>
<td>{{item.pice*item.num}}</td>
<!--添加删除事件-->
<!--利用index判断是否为2的倍数，然后替换类名，实现隔行换色-->
<td> <button @click="removebooks(index)"
:class="{'btn-info':index%2==0,'btn-primary':index%2!=0}" >删除
</button>
</td>
</tr>
</template>
</table>
<div class="pull-right">
总价：￥{{Sum}}
</div>
</div>
</div>
<h2 class="text-center">添加书籍</h2>
书名：<br>
<input type="text" class="form-control" placeholder="请输入书名" v-model="name"><br>
作者：<br>
<input type="text" class="form-control" placeholder="请输入作者" v-model="wirter"><br>
数量：<br>
<input type="text" class="form-control" placeholder="请输入数量" v-model="num"><br>
价格：<br>
<input type="text" class="form-control" placeholder="请输入价格" v-model="pice">
<br>
<button class="form-control btn-primary" @click="addbook">添加</button>
<br><br>
</div>
<!--引入js文件-->
<script src="./js/car.js"></script>
</body>
</html>
Js代码
new Vue({
el: '#app',
data: {
ind: 2,
name: '',
wirter: '',
num: '',
pice: '',
books: [
{ ind: 1, name: '亲热天国', wirter: '自来也', num: 1, pice: 9 },
{ ind: 2, name: '汉语词典', wirter: '新华社', num: 1, pice: 99 }
],
},
methods: {
//添加书籍
addbook() {
if (this.name !== '' && this.age !== '') {
if (Number.isNaN(Number(this.num))) {
alert('书籍数量与单价必须为数字');
} else {
this.books.push({
ind: this.ind + 1,
name: this.name,
wirter: this.wirter,
num: this.num,
pice: this.pice,
})
}
} else {
alert("书籍信息每一项均不能为空！")
}
},
//书籍数量加减
addnum(index){
this.books[index].num += 1;
},
cutnum(index){
if(this.books[index].num>0){
this.books[index].num -= 1;
}
},
//删除书籍
removebooks(index){
this.books.splice(index,index+1);
}
},
computed: {
// 计算总价
Sum: function () {
let arr1=[0];
//循环将每本书的小计（单价*数量），并添加到数组arr1；
for(let i =0; i<this.books.length; i++){
arr1.push(this.books[i].pice*this.books[i].num);
}
function getSum(total, num) {
return total + num;
}
//用reduce()方法计算数组内元素的总和
return arr1.reduce(getSum);
}
}
});
转载：https://blog.csdn.net/qq_38318589/article/details/102569578
查看评论