Vue.js-小demo实现简单的游戏购物车table

最新推荐文章于 2024-04-13 08:52:47 发布

GG_Zdd

最新推荐文章于 2024-04-13 08:52:47 发布

阅读量303

点赞数

分类专栏：前端 vue.js框架文章标签： vue.js 前端

本文链接：https://blog.csdn.net/GG_Zdd/article/details/112920587

版权

本文通过一个Vue.js的简单DEMO，展示了如何利用动态绑定、计算属性、条件判断和循环遍历实现游戏购物车的表格功能。在DEMO中，涉及了总价计算、数量限制以及样式布局。作者强调了在使用v-for循环时设置键(key)的重要性，并分享了两种不同的按钮操作处理方式，以适应不同场景的需求。最后，作者鼓励读者提出意见和建议，一起学习进步。

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

Vue.js-小demo实现简单的游戏购物车table

最近通过学习vue框架，基本熟悉了其中的动态绑定属性，计算属性，监听，条件判断，循环遍历，所以通过一个小demo来巩固一下。这个小demo主要是通过通过动态绑定v-bind，计算属性computed，v-if和v-else的条件判断，v-for循环遍历的使用以及一个小的打印格式过滤器。
效果图：
有水印勿怪！
在这里插入图片描述
整体效果是一个table，购物车嘛，最少就是1，所以我加了个disabled限制当数量为1时，禁止点击提交。代码的话分为三个部分，静态页H5，主体js，和页面布局css。代码如下：
静态页index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>游戏购物车</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="app">
  <div v-if="games.length">
    <table>
      <thead>
      <tr>
        <th></th>
        <th>游戏名称</th>
        <th>发行日期</