购物车
<!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">
<link rel="stylesheet" href="./venders/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
<script src="Vue/vue.js"></script>
<title>Document</title>
</head>
<body>
<div class="covers">
<div class="up-content">
<table class="table table-hover">
<thead>
<tr id="first">
<td v-for="item of characters">{
{item}}</td>
</tr>
</thead>
<tbody id="app">
<tr v-for="(item,index) of lists" :key="index">
<td>{
{index}}</td>
<td>{
{item.bookName}}</td>
<td>{
{item.author}}</td>
<td>
<button class="btn btn-primary" @click="minus(lists,index)">-</button>
<span class="count">{
{item.counts}}</span>
<button class="btn btn-primary" @click="plus(lists,index)">+</button>
</td>
<td class="price">{
{item.price}}</td>
<td v-if="index%2==0"><button class="btn btn-success" @click="del(lists,index)">删除</button></td>
<td v-if="index%2==1"><button class="btn btn-danger" @click="del(lists,index)">删除</button></td>
</tr>
</tbody>
</table>
<p class="total">总价: ￥<span>{
{sum}}</span></p>
</div>
<div class="down-content">
<p class="form-tit">添加书籍</p>
<div class="form-group">
<label for="exampleInputEmail1">书名</label>
<input type="text" class="form-control" v-model="bookName" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">作者</label>
<input type="text" class="form-control" v-model="author" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">单价</label>
<input type="text" class="form-control" v-model.number="single" id="exampleInputPassword1"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">数量</label>
<input type="text" class="form-control" v-model.number="counts" id="exampleInputPassword1"
placeholder="">
</div>
<button class="btn btn-primary btn-block" @click="add(lists,index)">添加</button>
<button class="btn btn-success btn-block" @click="reset(lists,index)">重置</button>
</div>
</div>
<script>
//tr首行
new Vue({
el: '#first',
data: {
characters: ["序号", "书名", "作者", "数量", "价格", "操作"]
}
})
//其他行
new Vue({
el: ".covers",
data: {
index: 0,
orders: "",
bookName: "",
author: "",
counts: null,
price: null,
single:null,//单价
singleArr:[],//单价数组
totals:[],//总价数组
countsArr :[],//数量数组
priceArr :[],//小计数组
lists: []//tr行渲染
},
methods: {
add(val, index) {
if (this.bookName === '') {
alert('书名不能为空')
}
if (this.author === '') {
alert('作者不能为空')
}
if (typeof (this.single) != 'number') {
alert('价格为必须为数字且不能为空')
}
if (typeof (this.counts) != 'number') {
alert('数量必须为数字且不能为空')
}
else {
this.lists.push({
orders: this.index++,
bookName: this.bookName,
author: this.author,
counts: this.counts,
single:this.single,
price: this.single*this.counts
})
this.reset()
this.countsArr.push(this.lists[index].counts)
this.priceArr.push(this.lists[index].price)
this.singleArr.push(this.lists[index].single)
//总价数组 totals
var summation = this.lists[index].counts*this.lists[index].price } },
reset() {
this.bookName = " "
this.author = " "
this.counts = " "
this.single = " "
},
del(val, index) {
this.lists.splice(index, 1)
this.priceArr.splice(index,1)
this.index--;//下标递减
// console.log(this.lists)
// console.log(index)
},
plus(val, index) {
this.lists[index].counts += 1
this.lists[index].price = this.lists[index].counts*this.lists[index].single
this.priceArr.splice(index,1, this.lists[index].price)
// console.log(this.lists[index].price)
// console.log(this.lists[index].counts)
// console.log(this.lists[index].single)
},
minus(val, index) {
if (this.lists[index].counts > 0) {
this.lists[index].counts -= 1
this.lists[index].price = this.lists[index].counts*this.lists[index].single
this.priceArr.splice(index,1, this.lists[index].price)
}
}
},
computed:{
sum(){
var res= this.priceArr.reduce(function(accumulator,currentValue){
return accumulator+currentValue
},0)
return res//reduce求和后return出
console.log(res)
}
}
})
</script>
</body>
</html>
总结与坑：
-
组件在使用有标签嵌套规则时,被嵌套的组件不能够直接加载或会影响结构需要使用is绑定方式来加载组件,但是不推荐这样去使用 ,所以table下循环嵌套tr这种就别用组件啦
-
vue的组件只能有一个根节点，即*.vue*文件中的 template标签下只能有一个子元素。
-
数组reduce方法:
-
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
-
total:必须，初始值，或者计算后的返回值
-
currentValue：必须，当前元素
-
currentIndex：可选，当前元素的索引值
-
arr：可选，当前元素所属的数组对象
-
InitialValue:可选,传递给数组的初始值
返回值为计算的结果
-
求数组项之和
var sum = arr.reduce(function (prev, cur) { return prev + cur; },0); -
求数组项最大值
var max = arr.reduce(function (prev, cur) { return Math.max(prev,cur); }); -
数组去重
var newArr = arr.reduce(function (prev, cur) { prev.indexOf(cur) === -1 && prev.push(cur); return prev; },[]);
-
-
computed内的结果记得要return出，特别是函数套函数，都要return
-
del(val, index) {
this.lists.splice(index, 1) this.priceArr.splice(index,1) this.index--;//下标递减 // console.log(this.lists) // console.log(index) }, //下标递减，否则删除项后，其后的索引值会乱 -
<td v-if="index%2==0"><button class="btn btn-success" @click="del(lists,index)">删除</button></td> <td v-if="index%2==1"><button class="btn btn-danger" @click="del(lists,index)">删除</button></td> 使用了v-if指令，做奇偶变色
查看10道真题和解析
