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>发行日期</th><th>购买单价</th><th>购买数量</th><th>玩家操作</th></tr></thead><tbody><!--循环遍历数组，养成加key的习惯！--><tr v-for="(item, index) in games" :key="index"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td>{{getPrice(item.price) | showPrice}}</td><td><!--<button @click="sub(item.id)">-</button>--><button @click="sub(index)" v-bind:disabled="item.count <= 1">-</button>{{item.count}}<button @click="add(index)">+</button><!--<button @click="add(item.id)">+</button>--></td><td><button @click="deleteHandler(index)">移除</button></td></tr></tbody></table><h2>总价：{{totalPP | showPrice}}</h2></div><h2 v-else>购物车已清空</h2>
</div>
<!--导入Vue.js，主体路径-->
<script src="../../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

主体main.js:

const app = new Vue({el: '#app',data: {games: [{id: 1,name: '《绝地求生》',date: '2017-9',price: 98.00,count: 1},{id: 2,name: '《怪物猎人：rise》',date: '2021-01',price: 359.00,count: 1},{id: 3,name: '《只狼》',date: '2019-07',price: 139.00,count: 1},{id: 4,name: '《怪物猎人：世界》',date: '2018-03',price: 288.00,count: 1},]},methods: {//价格getPrice(price) {return price},add: function (index) {//购买数量button +this.games[index].count++},sub: function (index) {//购买数量button —this.games[index].count--},/*add: function(id) {//购买数量button +const index = this.games.findIndex(item => item.id === id)this.games[index].count += 1 //这种写法需要add传个id对应静态页的item.id},*//*sub: function (id) {//购买数量button —const index = this.books.findIndex(item => item.id === id)this.games[index].count =//判断是否不等于1  是，执行？后的-1命令。不是，执行：后面的命令//this.games[index].count != 1 ? this.games[index].count-1 : this.games[index].count//判断是否等于1  是，执行？后的-1命令。不是，执行：后面的命令this.games[index].count == 1 ? 1 : this.games[index].count-1}*///移除splice（开始位置的数组下标index，删除多少个<这里是一行那就1就可以了>，删除之后的增加项<这里不需要增加不填即可>）deleteHandler(index) {this.games.splice(index,1)}},computed: {//总价totalPP() {let totalP = 0;this.games.forEach(item => {totalP = item.price * item.count + totalP})return totalP}},//格式过滤器filters: {showPrice(price) {return '￥' + price.toFixed(2)}}
})

这个filters过滤器主要是为了代码的复用性，因为总价和单价都需要返回一个固定格式：‘￥’ + 钱数.保留两位小数，所以可通过添加过滤器实现此返回的固定格式。
还有计算属性中也可以用for循环还遍历求出总和，我这里用forEach遍历数组games里的每一项item，拿到单价item.price即可得出表达式totalP = item.price * item.count + totalP得到总数totalP

页面布局style.css：

table {border: #4255ff;border-collapse: collapse;border-spacing: 0px;
}th, td {padding: 16px 16px;border: 1px solid silver;text-align: center;background-color: cornsilk;
}th {background-color: moccasin;color: darkblue;font-weight: 600;
}h2 {color: blue;text-align: center;font-weight: 900;
}

简陋的table样式，嘿嘿没啥艺术细胞，见谅。

总结：
通过demo可以很好的学习我们需要去学习知识，或者时巩固我们学到的知识。
就这个demo来说，主体还是很简单的，但是在写“ + ”和“ - ”这两个button的时候我是用的两种写法的：第一种直接写两个函数触发点击时递增或者递减然后在静态页进行限制。
第二种（主题中注释掉的内容）直接在主体文件中直接进行递增和递减（用三目运算进行限制<两个逻辑都进行>）再直接给静态页一个函数就可以了。
这两种各有优势，在需要的标签以及限制环境较少时就可以用第一种来写，而当代码量大，静态页不容易做到限制的时候我们用第二种就可以了。
整体而言代码中依旧有冗余，总价其实还以用reduce，更为简单。
一些小的细节，我都在代码中进行了注释。

最后就是写静态页v-for循环一定要给个键key！！！养成好习惯！重要的事情说三遍。
最后就是写静态页v-for循环一定要给个键key！！！养成好习惯！重要的事情说三遍。
最后就是写静态页v-for循环一定要给个键key！！！养成好习惯！重要的事情说三遍。

如果有什么宝贵的意见或建议欢迎评论区留言，看到也一定会给予回复。我是一个什么都不会，但什么都想学的小白，欢迎“骚扰”一起学习，共同进步！感谢三连！！！

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

Vue.js学习-搭建一个简单的demo
原创申明:本文为博主原创,转载请注明出处! 这里主要记录vue.js+webpack在一个简单实例中的使用过程说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS ...
Vue.js如何写一个简单的原生js模块，浏览器中的表现如何？
2019独角兽企业重金招聘Python工程师标准>>> 浏览器正在逐步的支持原生JavaScript模块.Safari和Chrome的最新版本已经支持它们了,Firefox和Edge ...
vue+js练手前端项目-＞游戏平台（贪吃蛇、俄罗斯方块、飞机大战、飞翔的小鸟、2048、五子棋）
线上地址:http://codeape.site/ 源码地址:https://gitee.com/wooden-joint/my-game 觉得有用可以点个star 项目介绍该游戏平台涉及的知识点有 ...
vue 使用人脸识别_使用Vue.js和Kairos构建简单的人脸识别应用
vue 使用人脸识别 Face Detection and Recognition have become an increasingly popular topic these days. It's ...
Vue.js小案例(2)
即时搜索这个例子主要应用了vue.js的自定义过滤器,可以通过 Vue.filter() 注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cl ...
微信商城小程序（服装鞋子商场）的设计与实现（Vue.js+小程序+.NET Core ）
目录第1章概述 1 1.1 项目背景介绍 1 1.2 微信小程序概述 1 1.2.1 微信小程序发展状况 2 1.2.2 微信小程序丰富的API接口 2 第2章相关技术概述 3 2.1 .NET ...
vue.js 和 bootstrap 实现简单的购物车
购物车实现的截图详情代码如下: <!doctype html> <html> <head><meta charset="UTF-8"&g ...
Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...
java 小项目：简单扑克牌游戏
项目要求 1>新建两个玩家 2>创建扑克牌,洗牌 3>发牌,每个玩家没人拿两张,比较大小 4>比较规则:两个玩家选出各种最大的牌,进行游戏,先比较点数大小,点数大的获胜,点数相 ...

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

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

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

最新文章

热门文章