vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>   
        <div id="app">
            <div v-if="books.length">
                <table border="" cellspacing="" cellpadding="">
                    <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.data}}</td>
                            <td>{{item.price | showPrice}}</td> <!--过滤器 -->
                            <td>
                                <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
                                {{item.count}}
                                <button @click="increment(index)">+</button>
                            </td>
                            <td>
                                <button @click="remove(index)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h2>
                    总价格:{{totolPrice | showPrice}}
                </h2>
            </div>
            <h2 v-else>购物车为空</h2>
        </div>
    </body>
    <script type="text/javascript" src="../vue.js"></script>
    <script src="index.js"></script>
</html>

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table{
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;
}
th,td{
    padding: 8px 16px;
    border: 1px solid #ccc;
    text-align: left;
}
th{
    background-color: #e7e7e7;
    color: darkgray;
    font-weight: 600;
}

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const app = new Vue({
    el:'#app',
    data:{
        books:[
                {id:100,name:'计算机组成原理',data:2002,price:100,count:1},
                {id:101,name:'现代操作系统',data:2002,price:100,count:1},
                {id:102,name:'Unix编程艺术',data:2002,price:100,count:1},
                {id:103,name:'代码大全',data:2002,price:100,count:1},
            ],
    },
    methods:{
        increment(index){
            this.books[index].count++;
        },
        decrement(index){
            this.books[index].count--;
        },
        remove(index){
            this.books.splice(index,1)
        }
    },
    //计算属性
    computed:{
        totolPrice(){
            //第一种写法
            let totolPrice = 0;
            for(let i=0;i<this.books.length;i++){
                totolPrice += this.books[i].count * this.books[i].price;
            }
            return totolPrice;
             
            //第二种写法
            // let totolPrice = 0;
            // for(let i in this.books){
            //  totolPrice += this.books[i].count * this.books[i].price;
            // }
            // return totolPrice;
             
            //第三种写法
            // let totolPrice = 0;
            // for(item of this.books){
            //  totolPrice += item.count * item.price;
            // }
            // return totolPrice;
        }
    },
    //过滤器
    filters:{
        showPrice(price){
            return '￥' + price.toFixed(2);
        }
    }
})

　　

posted @ 2020-12-09 09:43  孙旋  阅读(53)  评论(0)  编辑  收藏  举报