Vue(9)购物车练习

Vue(9)购物车练习购物车案例经过一系列的学习,我们这里来练习一个购物车的案例**需求:**使用vue写一个表单页面,页面上有购买的数量,点击按钮+或者-,可以增加或减少购物车的数量,数量最少不得少于0,点击移除按钮

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

购物车案例

经过一系列的学习,我们这里来练习一个购物车的案例

  需求:使用vue写一个表单页面,页面上有购买的数量,点击按钮+或者-,可以增加或减少购物车的数量,数量最少不得少于0,点击移除按钮,会移除该商品,当把所有的商品移除后,页面上的表单消失,然后出现文字:购物车为空,表单下方是商品的总价格,随着商品的数量增加而增加,默认是0元,总体效果如下:
Vue(9)购物车练习
 

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
  <style>
    table{
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
    }
    th,td{
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
    }
    th{
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
    }
  </style>
</head>
<body>
<div id="app">
  <div v-if="books.length">
    <table>
      <thread>
        <tr>
          <th></th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thread>
      <tbody>
      <tr v-for="(book, index) in books" :key="book">
        <td>{{index+1}}</td>
        <td>{{book.name}}</td>
        <td>{{book.publish_date}}</td>
        <td>{{book.price | showPrice}}</td>
        <td>
          <button @click="decrease(index)" :disabled="book.count <= 0">-</button>
          {{book.count}}
          <button @click="increase(index)">+</button>
        </td>
        <td>
          <button @click="removeClick(index)">移除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <p>总价:{{totalPrice | showPrice}}</p>
  </div>
  <h2 v-else>购物车为空</h2>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      books: [
        {"name":"算法导论", "publish_date":"2006-9", "price":20.00, "count": 0},
        {"name":"UNIX编程艺术", "publish_date":"2006-2", "price":30.00, "count": 0},
        {"name":"编程技术", "publish_date":"2008-10", "price":40.00, "count": 0},
        {"name":"代码大全", "publish_date":"2006-3", "price":50.00, "count": 0},
      ],
    },
    methods: {
      // 增加+
      decrease(index){
        this.books[index].count-=1
      },
      // 减少-
      increase(index){
        this.books[index].count+=1
      },
      // 移除按钮
      removeClick(index){
        this.books.splice(index, 1)
      }
    },
    computed: {
      // 计算总价格
      totalPrice(){
        let totalPrice = 0
        for (let item of this.books){
          totalPrice += item.price * item.count
        }
        return totalPrice
      }
    },
    // 过滤器,将价格过滤成有2位小数的
    filters: {
      showPrice(price){
        return '¥' + price.toFixed(2)
      }
    }
  })
</script>
</body>
</html>

以上就是全部代码,当中使用到了很多知识点

  • v-for:循环,循环books列表
  • v-on:事件监听,监听点击事件
  • disabled:按钮是否可以点击的属性,为True可点击,为False不可点击,增加判断条件:disabled="book.count <= 0"当购物车数量≤0,则无法点击
  • v-ifv-else:条件判断,判断books的列表长度,如果有长度展示列表,如果长度为0则展示文字购物车为空
  • filters:自定义过滤器,过滤价格,使本身的价格过滤后带有2位小数
  • computed:计算属性,计算购物的总价格
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165398.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • i386和i686的区别[通俗易懂]

    i386和i686的区别[通俗易懂]i386和i686现在所有的intel32位体系(包括AMD等兼容CPU)都叫i386体系,包括P4。、i686仍然属于i386体系,不过对CPU(相对于386)的特性作了指令优化。GNU/Linux分为alpha、PowerPC、Sun等各个不同版本,所有从Intel386-P4都用i386版本,但i386版本中有几个内核(i486,i486,i586,i686),安装时安装程序检测到

  • padstart兼容_显示列出polyfill

    padstart兼容_显示列出polyfill?原文链接:欢迎star.今天在看ES7新增的部分Api的时候刚好看到padStart的这个方法,好像还挺实用的,而且也想在正式开始工作之前先找找写代码的感觉,于是顺手(其实还是花了不少时间的)就实现了这个polyfill。相关的API用法在MDN上有说明。链接下面是具体实现if(!String.p…

  • ms17010漏洞复现-2003

    ms17010漏洞复现-2003先使用Smbtouch模块检测一下是否有漏洞。然后使用Doublepulsar写一个shellcode到本地。生成成功后的截图:再使用EternalRomance植入Doublepulsar后门。成功的截图: PS:仿佛是由于之前已经上传过bin的缘故,第二次测试的时候失败了。但是不影响后续操作。都成功了以后该我们的Doublepulsar来反弹shell了。…

  • es与数据库的同步方案

    es与数据库的同步方案一、双写模式我们采取MySQL作为主要的数据存储,利用MySQL的事务特性维护数据一致性,使用ElasticSearch进行数据汇集和查询,此时es与数据库的同步方案就尤为重要。保证es与数据库的同步方案:1、首先添加商品入数据库,添加商品成功后,商品入ES,若入ES失败,将失败的商品ID放入redis的缓存队列(或MQ),且失败的商品ID入log文件(若出现redis挂掉,可从日志中取异…

  • 贪吃蛇代码–c语言版 visual c++6.0打开

    贪吃蛇代码–c语言版 visual c++6.0打开#include”stdafx.h”#include<stdio.h>#include<time.h>#include<windows.h>#include<stdlib.h>#include<conio.h>#defineU1#defineD2#defineL3#defineR4//蛇的状态U:上D:下L:左R:右typedefstructsnak

  • VIF方法(方差膨胀因子)因子独立性检验 全流程解读

    VIF方法(方差膨胀因子)因子独立性检验 全流程解读    基于因子模型的选股策略是股票市场量化应用最广泛的模型之一。然而很多时候,使用因子模型在实盘运行的绩效并不理想,究其原因可能是由于因子选择的偏差,市场风格轮动等。但还有一个显著的因素,就是选取因子之间可能存在高度的多重共线性,导致模型对股票价格与市场的解释能力存在很大偏误。       为了在筛选因子之初就避免陷入这样的误区。本文介绍一种VIF(方差膨胀检验)方法,来对因子之…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号