vue --- > 购物车页面

最新推荐文章于 2024-04-27 09:42:37 发布

栗子好好吃

最新推荐文章于 2024-04-27 09:42:37 发布

阅读量523

点赞数 1

分类专栏： Vue 文章标签： vue学习

本文链接：https://blog.csdn.net/piano9425/article/details/89227691

版权

Vue 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

下面我看开始自己写一个购物车的页面.
我们希望得到如下的效果:
在这里插入图片描述
说明:

购买数量最小为0
购买数量变化时,对应的总价随之变化
点击移除操作对应的商品会移除掉,总价随之改变
每个商品作为一个list表的一个对象
每个对象,包含id、name、price、count等属性

index.html (整体代码最后给出)

导入依赖(从上往下)

// 样式表
<link rel="stylesheet" style="text/css" href="style.css">
// vue的cdn
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
// js
<script src="index.js"></script>

表格 (表头+表身)
我们希望,所有商品移除时,显示购物车为空的页面,否则就显示正常的页面

// 依赖
<template v-if="list.length">     // 根据商品的长度判断购物车是否为空
</template>   // template是vue内置的一个html元素,它在编译后不会显示在Html页面里面
<div v-else>购物车为空</div>

// 表头
<tr>
    <th></th>
    <th>商品名称</th>
    <th>商品单价</th>
    <th>购买数量</th>
    <th>操作</th>
</tr>

// 表身
// 这个地方需要注意的是在商品数量为0时, “-”将无效
<template v-for="(item,index) in list">
    <tr>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        // 数量为0时,减号按钮将失效使用 :disable= "item.count ==='0' " 将其禁用
        // 数量属性,左右2边,分别有一个减少和增加按钮 使用<button>@click绑定对应方法
        // 传递给对应方法时,需要给出当前操作的数量的序号,此处选择的是index,
        (ps:若传item.id,按不同顺序删除的时候,将导致商品的编号和在list中的位置不一致)
        <td>  // 数量
            <button @click="handleReduce(index)" :disabled="item.count === 0">-</button>
                {{ item.count }}
            <button @click="handleAdd(index)" >+</button>
        </td>
        <td> // 移除操作
            <button @click="handleRemove(index)">移除</button>
        </td>
    </tr>
</template>

整体代码(index.html)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>购物车示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="app" cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="(item,index) in list">
                        <tr>
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>
                                <button @click="handleReduce(index)" :disabled="item.count === 0">-</button>
                                {{ item.count }}
                                <button @click="handleAdd(index)">+</button>
                            </td>
                            <td><button @click="handleRemove(index)">移除</button></td>
                        </tr>
                    </template>

                </tbody>
            </table>
            <div>总价: ￥{{ totalPrice }}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="index.js"></script>
</body>

</html>

index.js

需要注意:价格每格3位数,就会显示一个","需要:

// 正则
total.toString().replace(/\B(?=(\d{3})+$)/g, ',')

移除按钮,实际上是对list进行删除操作.可以使用js的splice.(i,1);

this.list.splice(i, 1)  ; // 在vue中使用this可以访问上面定义的数据

// index.js
var app = new Vue({
  el: '#app',
  data: {
      list: [{
              id: 1,
              name: 'iPhone 7',
              price: 6188,
              count: 1
          },
          {
              id: 2,
              name: 'iPad Pro',
              price: 5888,
              count: 1
          },
          {
              id: 3,
              name: 'MacBook Pro',
              price: 21488,
              count: 1
          }
      ]

  },
  computed: {
      totalPrice: function() {
          var total = 0;
          for (var i = 0; i < this.list.length; i++) {
              var item = this.list[i];
              total += item.price * item.count;
          }
          return total.toString().replace(/\B(?=(\d{3})+$)/g, ',') 
      }
  },
  methods: {
      handleReduce: function(i) {
          this.list[i].count--;
      },
      handleAdd: function(i) {
          this.list[i].count++;
      },
      handleRemove: function(i) {
          this.list.splice(i, 1);
      }
  }
});

此时的效果如下：
在这里插入图片描述
还缺少样式.下面附上样式的代码

style.css

// style.css
[v-cloak] {
    display: none;
}

table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}

th,
td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}

th {
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowarp;
}

以上为了以后大项目开发而分开写的,也可以向下面这样放在一起:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>购物车示例</title>
	<style>
		[v-cloak] {
    display: none;
}

table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}

th,
td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}

th {
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowarp;
}
	</style>
</head>

<body>
    <div id="app" cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="(item,index) in list">
                        <tr>
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>
                                <button @click="handleReduce(index)" :disabled="item.count === 0">-</button>
                                {{ item.count }}
                                <button @click="handleAdd(index)">+</button>
                            </td>
                            <td><button @click="handleRemove(index)">移除</button></td>
                        </tr>
                    </template>

                </tbody>
            </table>
            <div>总价: ￥{{ totalPrice }}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script >
		var app = new Vue({
    el: '#app',
    data: {
        list: [{
                id: 1,
                name: 'iPhone 7',
                price: 6188,
                count: 1
            },
            {
                id: 2,
                name: 'iPad Pro',
                price: 5888,
                count: 1
            },
            {
                id: 3,
                name: 'MacBook Pro',
                price: 21488,
                count: 1
            }
        ]

    },
    computed: {
        totalPrice: function() {
            var total = 0;
            for (var i = 0; i < this.list.length; i++) {
                var item = this.list[i];
                total += item.price * item.count;
            }
            return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
        }
    },
    methods: {
        handleReduce: function(i) {
            this.list[i].count--;
        },
        handleAdd: function(i) {
            this.list[i].count++;
        },
        handleRemove: function(i) {
            this.list.splice(i, 1);
        }


    }
});
	</script>
</body>

</html>

栗子好好吃

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue --- > 购物车页面

下面我看开始自己写一个购物车的页面.我们希望得到如下的效果:说明:购买数量最小为0购买数量变化时,对应的总价随之变化点击移除操作对应的商品会移除掉,总价随之改变每个商品作为一个list表的一个对象每个对象,包含id、name、price、count等属性index.html (整体代码最后给出)导入依赖(从上往下)// 样式表<link rel="styles...
复制链接

扫一扫