vue实现可改变购物数量的购物车
codesky · 122浏览 · 发布于2021-07-19 +关注

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

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

效果图:

知识点:

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

实现代码:

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

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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>


相关推荐

PHP实现部分字符隐藏

沙雕mars · 910浏览 · 2019-04-28 09:47:56
Java中ArrayList和LinkedList区别

kenrry1992 · 379浏览 · 2019-05-08 21:14:54
Tomcat 下载及安装配置

manongba · 488浏览 · 2019-05-13 21:03:56
JAVA变量介绍

manongba · 536浏览 · 2019-05-13 21:05:52
什么是SpringBoot

iamitnan · 504浏览 · 2019-05-14 22:20:36
加载中

0评论

评论
分类专栏
小鸟云服务器
扫码进入手机网页