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/166104.html原文链接:https://javaforall.cn

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

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

(0)


相关推荐

  • 常见免费邮箱 SMTP 服务地址及端口「建议收藏」

    常见免费邮箱 SMTP 服务地址及端口「建议收藏」常见免费邮箱SMTP服务地址及端口邮箱服务服务器地址SSL端口号非SSL端口号163邮箱IMAPimap.163.com993143SMTPsmtp.163.com465/99425POP3pop.163.com995110QQ邮箱IMAPimap.qq.com993143SMTPsmtp.qq.com465/58725POP3pop.qq.com995–foxmail邮箱IMAPimap

  • Google Chrome Frame 谷歌浏览器框架

    Google Chrome Frame 谷歌浏览器框架 一句话:GoogleChromeFrame让IE仅剩下皮囊。微软这回要哭了,Google最新发布的ChromeFrame可以将IE的Trident内核替换成WebKit,是IE一下子有了两内核(浏览器也双核了,厚厚~)。Google在帮助其竞争对手改善其产品,微软的IE开发团队是不是会很尴尬?在运行插件之后,用户的IE浏览器将获得Chrome的性能和功能,拥有更快的JS解析…

  • potplayer设置快捷键[通俗易懂]

    potplayer设置快捷键[通俗易懂]引言potplayer是一款非常好用的播放器,功能齐全,且无广告,但是我在使用中按错快捷键ctrl+spotplayer就开启了一个叫采集器的东西,非常难受.话说和ctrl+s这么高频使用的快捷键冲突也太令人恼火了吧解决方法在播放区域右键鼠标打开菜单,找到选项按钮按钮????找到快捷键选项卡????添加快捷键,输入ctrl+s,然后选择未定义指令,确定,大功告成!…

  • 考拉小巫的英语学习日记

    考拉小巫的英语学习日记考拉小巫的英语学习日记读书笔记、、、小巫英语笔记 在无比枯燥和受挫的时候,我是如何把自学计划坚持到底的;在这本书里,我想分享我考过的所有英语考试的备考方案、计划安排、所用书籍及资料,想分享

  • pandas用法-全网最详细教程

    pandas用法-全网最详细教程一、生成数据表1、首先导入pandas库,一般都会用到numpy库,所以我们先导入备用:importnumpyasnpimportpandasaspd2、导入CSV或者xlsx文件:df=pd.DataFrame(pd.read_csv(‘name.csv’,header=1))df=pd.DataFrame(pd.read_excel(‘nam…

  • 自定义属性 declare-styleable数据类型简介:

    自定义属性 declare-styleable数据类型简介:一、reference:参考指定Theme中资源ID。1.定义: 1 2 3 <declare-styleablename=”My”> <attrname=”label”format=”reference”> </declare-styleable> 2.使用: 1…

发表回复

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

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