Vue——案例：对表格按钮进行加减、删除以及计算总价

已于 2022-06-27 17:11:25 修改
阅读量1.9k 收藏 14
点赞数
分类专栏： Vue 文章标签： vue.js
于 2021-10-11 16:03:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanchen_J/article/details/120705251
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style type="text/css">

		</style>
	</head>
	<body>
		<div id="app">
			<table border="0" cellspacing="" cellpadding="20">
				<tr>
					<th>序号</th>
					<th>电影名称</th>
					<th>发行时间</th>
					<th>电影票价</th>
					<th>购买数量</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in movies">
					<td>{{index}}</td>
					<td>{{item.name}}</td>
					<td>{{item.date}}</td>
					<td>{{item.money | toFixedMoney}}</td>
					<td>
						<button type="button" @click="reduce(index)" :disabled="item.count<=1">-</button>
						{{item.count}}
						<button type="button" @click="plus(index)">+</button>
					</td>
					<td>
						<button type="button" @click="cut(index)">删除此行</button>
					</td>
				</tr>
			</table>
			<h2>共计:{{totaMoney | toFixedMoney}}</h2>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data: {
					movies: [{
							name: "蜘蛛侠",
							date: "2006-9",
							money: 45.00,
							count: 1
						},
						{
							name: "毒液",
							date: "2020-2",
							money: 32.00,
							count: 1
						},
						{
							name: "小猪佩奇",
							date: "2008-13",
							money: 20.00,
							count: 1
						},
						{
							name: "长津湖",
							date: "2021-10",
							money: 100.00,
							count: 1
						}
					],
				},
				methods: {
					reduce(index) {
						this.movies[index].count--;
					},
					plus(index) {
						this.movies[index].count++
					},
					cut(index) {
						this.movies.splice(index, 1)
					}

				},
				computed: {
					totaMoney() {
						/* for循环
						let total = 0;
						for (var i = 0; i < this.movies.length; i++) {
							total += this.movies[i].money * this.movies[i].count
						}
						return total; */
						// forEach
						/* let total = 0;
						this.movies.forEach(item=>{
							total += item.money * item.count
						})
						return total */
						// for in
						/* let total = 0;
						for(let i in this.movies){
							total+= this.movies[i].money * this.movies[i].count
						}
						return total; */


						// forof
						/* let total = 0;
						for (let item of this.movies) {
							total += item.money * item.count
						}
						return total; */

						// filter
						/* let total = 0;
						this.movies.filter((v)=>{
							total += v.count *v.money
						})
						return total */

						// map
						/* let total = 0;
						this.movies.map((v)=>{
							total +=v.count * v.money
						})
						return total */

						// reduce
						return this.movies.reduce((currentTotal, item) => {
							return currentTotal + item.money * item.count
						}, 0)

						/* return this.movies.reduce((total, currentValue) => {
							return total += currentValue.money * currentValue.count
						}, 0) */
					}
				},
				filters: {

					toFixedMoney: function(money) {
						let fix = money.toFixed(2);
						return '￥' + fix
					}
				}
			})
		</script>
	</body>
</html>

效果如下：

Vue.filter( id, [definition] )注册或获取全局过滤器。

Southern Wind
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用vue写表格实现数量的加减
weixin_48047636的博客
05-20 1345
<template> <div> <div class="app"> <table> <thead> <tr> <th>序号</th> <th>名称</th> <th>单价</th> <th>数量&l
Vue的五种方法实现加减乘除运算
一步一个脚印，踏实努力，向着目标前进
08-22 4838
这些方法都可以实现加减乘除运算，具体使用哪种方法取决于您的需求和项目的架构。
前端Vue自定义带加减按钮的数字输入框组件的设计与实现
最新发布
chenchuang0128的博客
05-31 857
通过自定义带加减按钮的数字输入框组件的实践，我们深入了解了Vue组件化开发的过程和技巧。未来，随着前端技术的不断发展，组件化开发将会更加成熟和完善，为前端开发带来更多的便利和可能性。组件，开发者可以更加高效地构建具有数字输入框功能的前端界面，减少了重复代码的编写，提高了代码的复用性和可维护性。然而，组件化开发也带来了一些挑战，如如何设计合理的组件拆分策略、如何处理组件间的交互和通信等。组件化开发允许开发者将复杂的前端应用拆分成多个独立的、可复用的组件。模板：组件的模板定义了组件的结构和布局。
vue+element的表格中添加加减按钮的问题
09-05
这个是一个table框加减按钮的一个功能模块，这个是在其他的地方没有的，表格加载加减按钮点击时互不影响的一种方法。
vue购物车加减按键
yfy538的博客
03-10 395
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{ padding: 0; margin:0; border: none; } html,body{ width: 100%; height: 100%; } #center{ width: 13.
vue简单计数器 实现点击加减更改数字
爬楼梯的前端小白的博客
07-16 3594
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue</title> <script src="js/vue.js"></script> <style> .input { width:188px; background:#fff; border-radius:6px; box-sizin.
vue 实现计数器，点击按钮数字加减。
是秃子总会发光
02-21 4173
vue实现简单的计数器，点击按钮实现数字的加减。
vue实现商品加减计算总价的实例代码
10-18
在Vue.js中实现商品加减计算总价的功能是一个常见的电商应用需求。这个实例代码演示了如何在用户选择商品并调整数量时动态计算总价。下面我们将详细解释这个实例中的关键点。 首先，HTML结构是整个功能的基础。`...
vue 实现购物车总价计算
10-16
在本文中，我们将探讨如何使用Vue.js框架来实现一个购物车总价的计算。这个功能是电商网站中购物车模块的核心部分之一，它负责实时计算用户添加到购物车中的商品总价。 首先，我们需要明确几个关键点： 1. Vue实例...
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
在Vue和Element UI框架下，实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践，旨在提高代码效率和用户体验。在传统的实现方式中，可能需要通过双击单元格来激活编辑模式，而这里我们...
vue数据操作之点击事件实现num加减功能示例
12-29
本文实例讲述了vue数据操作之点击事件实现num加减功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue num加减</title> [removed][removed] </head> <body> <div id=app> <button v-on:click=add(10)>click me</button> <button v-on:click=remov
Vue入门之数量加减运算操作示例
10-17
主要介绍了Vue入门之数量加减运算操作,结合实例形式分析了vue.js基本数值运算相关操作技巧,需要的朋友可以参考下
使用vue3创建两个按钮实现加一和减一的功能
qq_65142821的博客
12-07 1075
使用vue3的语法创建两个按钮，分别使用加一和减一的功能。
vuex使用 实现点击按钮进行加减
weixin_34292402的博客
06-08 1247
1 //store.js 2 /** 3 * vuex配置 4 */ 5 6 import Vue from 'vue' 7 import Vuex from 'vuex' 8 9 Vue.use(Vuex); 10 11 //定义属性（数据） 12 var state={ 13 count:6 14 } 15 16 //定义getters 17 var g...
前端Vue自定义数字输入框 带加减按钮的数字输入框组件
chenchuang0128的博客
06-23 3110
### 使用方法```使用方法-- title: 标题 isSetMax: 是否设置最大值 maxNum: 最大值-->
小陈学Vue.js --案例：合计总价--
weixin_50419323的博客
12-08 1563
需求说明 1、使用 v-for 遍历数据显示列表效果，使用 v-on 绑定 click 事件，当我们 点击列表项目的时候，当前的列表项目变成绿色，再次点击绿色的项目，可以变 为黄色背景 2、当点击 项目变成绿色之后，下方的 Total 总数变成所有变成绿色项目数 据的总和，最后完成效果如图： 效果： ...
vue基础--计算商品的总价格
weixin_44475738的博客
06-18 1386
先用filter 过滤。
vue 计数器 按按钮加以或减一
芋泥啵啵月亮的博客
07-08 2054
监听事件 用v-on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
vue购物车加减计算总价
06-07
好的，针对您的问题，我可以给您提供以下思路： 1. 首先，在Vue中定义一个数据对象，用来存储购物车中的商品列表和对应的数量，例如： ``` data() { return { cart: [ { name: '商品A', price: 10, quantity: 1 }, { name: '商品B', price: 20, quantity: 2 }, { name: '商品C', price: 30, quantity: 3 }, ] } } ``` 2. 在页面中展示购物车列表，并且为每个商品的数量添加加减按钮，例如： ``` <ul> <li v-for="(item, index) in cart" :key="index"> <span>{{ item.name }}</span> <button @click="decreaseQuantity(index)">-</button> <span>{{ item.quantity }}</span> <button @click="increaseQuantity(index)">+</button> <span>单价：{{ item.price }}</span> <span>小计：{{ item.price * item.quantity }}</span> </li> </ul> ``` 3. 在Vue中定义计算总价的方法，例如： ``` computed: { totalPrice() { return this.cart.reduce((total, item) => total + item.price * item.quantity, 0) } } ``` 4. 在页面中展示总价，例如： ``` <div> <span>总价：{{ totalPrice }}</span> </div> ``` 5. 最后，实现加减按钮的点击事件： ``` methods: { decreaseQuantity(index) { if (this.cart[index].quantity > 1) { this.cart[index].quantity-- } }, increaseQuantity(index) { this.cart[index].quantity++ } } ``` 这样就实现了购物车的加减计算总价的功能。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Southern Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值