当前位置:   article > 正文

vue的简单购物车案例_vue.js 购物车案例

vue.js 购物车案例

实现功能有:

1.渲染功能:v-if / v-else        v-for        :class

2.删除功能:点击传参 filter过滤覆盖原数据

3.修改个数:点击传参 find找对象

4.全选反选:计算属性computed 完整写法 get/set

5.统计选中的总价和总数量:计算属性computed reduce条件求和

6.持久化到本地:watch监视,local storage,json.stringify,json.parse

<!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" />

    <link rel="stylesheet" href="./css/inputnumber.css" />

    <link rel="stylesheet" href="./css/index.css" />

    <title>购物车</title>

  </head>

  <body>

    <div class="app-container" id="app">

      <!-- 顶部banner -->

      <div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div>

      <!-- 面包屑 -->

      <div class="breadcrumb">

        <span>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/801326
推荐阅读
相关标签