购物车

一路向北@L

于 2019-10-15 19:34:18 发布

阅读量98

点赞数

分类专栏： Vue 文章标签： vue购物车 v-for v-if 数组reduce方法

本文链接：https://blog.csdn.net/qq_40944918/article/details/102573171

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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指令，做奇偶变色

一路向北@L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车

<!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-...
复制链接

扫一扫