Vue.js框架实现购物车功能
作者:涉水的小菜叽 发布时间:2024-04-30 10:46:59
标签:Vue.js,购物车
本文实例为大家分享了Vue.js框架实现购物车的具体代码,供大家参考,具体内容如下
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.min.js"></script>
</head>
<body>
<div id="app" style="position: relative;left: 30%">
<table cellpadding="10">
<thead>
<th><input type="checkbox" v-model="cb" v-on:click="allSelect">全选</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="x in info">
<td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td>
<td>{{x.total}}</td>
<td><button v-on:click="del(x)">删除</button></td>
</tr>
</tbody>
</table>
<Br>
<p>总金额:{{all}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
all: 0,
cb: false,
info: [{
bol: false,
name: "iphone7",
price: 6000,
num: 1,
total: 6000
}, {
bol: false,
name: "荣耀6x",
price: 1200,
num: 1,
total: 1200
}, {
bol: false,
name: "dell笔记本",
price: 4000,
num: 1,
total: 4000
}]
},
methods: {
//计算单价
count: function(obj) {
for(var i = 0; i < this.info.length; i++) {
//
if(this.info[i] == obj) {
this.info[i].total = obj.price * obj.num;
}
//如果被选中了,就计算总价格
if(obj.bol) {
this.allSelect();
}
}
},
//删除
del: function(obj) {
this.info.splice(this.info.indexOf(obj), 1)
this.allCount();
},
//单选
sign: function() {
this.allCount();
},
//全选
allSelect: function() {
for(var i = 0; i < this.info.length; i++) {
this.info[i].bol = this.cb;
}
this.allCount();
},
//计算总价
allCount: function() {
//每次计算总价都要清空
this.all = 0;
for(var i = 0; i < this.info.length; i++) {
//计算被选中的商品
if(this.info[i].bol) {
this.all += this.info[i].total;
}
}
}
}
})
</script>
</body>
</html>
效果图:
更多文章可以点击《Vue.js前端组件学习教程》学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
来源:https://blog.csdn.net/xxhdcblogzh888/article/details/76974618
0
投稿
猜你喜欢
- 本文实例为大家分享了js canvas随机粒子特效的具体代码,供大家参考,具体内容如下前言canvas实现前端的特效美术结果展示代码html
- js原生方法map实现<!DOCTYPE html><html lang="en"><he
- 目录1. 最直观的相加2. 借助 itertools3. 使用 * 解包4. 使用 extend5. 使用列表推导式6. 使用 heapq7
- 1.open使用open打开文件后一定要记得调用文件对象的close()方法。比如可以用try/finally语句来确保最后能关闭文件。fi
- GO项目目录解释src存放源代码pkg编译后生成的文件bin编译后生成的可执行文件背景在src目录下,新建文件test.go,编写代码。控制
- 目录一 项目描述1.1 背景1.2 实现设计1.2.1 之前的方法1.2.2 优化后的方法二.实现详情2.1 编辑Python可执行文件2.
- 本文实例讲述了go语言使用第三方包 json化结构体操作。分享给大家供大家参考,具体如下:前提条件:安装好操作系统对应的gitgo get
- RPCHandler 和 R * roxy 的基本思路是很比较简单的。 如果一个客户端想要调用一个远程函数,比如 foo(1, 2, z=3
- 本文实例总结了CI框架中数据库操作函数$this->db->where()相关用法。分享给大家供大家参考,具体如下:CI 框架数
- 背景简介ImageAI是一个面向计算机视觉编程的Python库,支持最先进的机器学习算法。主要图像预测,物体检测,视频对象检测与跟踪等多个应
- 由于是从源码包安装的Mysql,所以系统中是没有红帽常用的servcie mysqld restart这个脚本只好手工重启有人建议Killa
- 前言相关性分析算是很多算法以及建模的基础知识之一了,十分经典。关于许多特征关联关系以及相关趋势都可以利用相关性分析计算表达。其中常见的相关性
- pytorch中的 2D 卷积层 和 2D 反卷积层 函数分别如下:class torch.nn.Conv2d(in_channels, o
- 首先,把项目上传到虚拟机中。scp -r C:\Users\Administrator\Desktop\fresh root@192.168
- 概述可以获取的数据包括:video-视频模块user-用户模块dynamic-动态模块这次用“Running Man”十周年特辑的视频,来做
- 简介简介:零代码的22个小游戏集合 作者:Grant Jenks版本:2.4.0安装:D:\>pip install fre
- 本文实例讲述了python获得一个月有多少天的方法。分享给大家供大家参考。具体分析如下:在python的datetime模块中没有一个月有多
- 前言该脚本的代码大部分是参考自阿里云的官方帮助文档。1, 脚本语言使用的是python, 我个人只是了解python,没有太深入的知识功底2
- 前言:一直想写一个监控方面的脚本,然后想到了运维这方面的,后来就写了个脚本,下面话不多说了,来一起看看详细的介绍吧。准备:psutil模块(
- AJAX:Asynchronous JavaScript And XML--------异步JavaScript和XML