用Vue写移动端购物车功能

最新推荐文章于 2021-05-25 20:08:07 发布

small面包

最新推荐文章于 2021-05-25 20:08:07 发布

阅读量873

点赞数

分类专栏：移动端前端 Vue 文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/weixin_44986077/article/details/104939981

版权

本文介绍了如何使用Vue.js来实现移动端的购物车功能。通过计算属性进行逻辑处理，简化了代码实现。若底部无公共组件，无需引入额外的common模块，布局样式可按需自定义。

摘要由CSDN通过智能技术生成

先看一下效果
在这里插入图片描述
用计算属性计算比较方便，下面是这部分的逻辑代码

<template>
  <div>
    <div class="top">购物车</div>
    <table>
      <tr
        v-for="item in list"
        :key="item.id"
      >
        <el-checkbox
          v-model="item.isSelected"
          style="margin-left:.5rem"
        ></el-checkbox>
        <img
          src="./../assets/images/u=1837641500,1856679804&fm=26&gp=0.jpg"
          alt=""
          style="margin-left:0.5rem;vertical-align:middle;margin-top:0.4rem;width:2rem"
        >
        <span class="food">{
   {
   item.title}}</span>
        <span class="size">{
   {
   item.desc}}</span>
        <span class="price">￥{
   {
   item.price}}</span>
        <div style="margin-left:6rem">
          <el-input-number
            v-model="item.num"
            @change="handleChange"
            :min="1"
            :max="10"
            size="small"
            class="number&