Vue计算属性案例-----菜单页面计算
要求：
动态添加菜品个数
实现菜品数量的添加和减少
菜品数量变化后计算出总价格
当数量减为0时再次点击减少按钮就移除菜品
完整代码：
<!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'>
<title>购物车页面计算</title>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
</head>
<body>
<style>
#app{
width: 500px;
margin: 0 auto;
background-color: antiquewhite;
}
.box{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
/* background-color: aquamarine; */
}
img{
width: 70px;
height: 70px;
}
.order{
width: 200px;
height: 100px;
display: flex;
flex-direction:column;
margin-left: 30px;
}
.btn{
width: 100px;
height: 20px;
display: flex;
justify-content: flex-start;
}
.total{
width: 100%;
text-align:center;
}
.title{
width: 100%;
text-align:center;
}
</style>
<div id='app'>
<div style="width: 100%;text-align: center;font-size: 40px;">菜单</div>
<!-- 动态添加菜品 -->
<div v-for="(el,index) in arr" class="box" :key="el.id" >
<!-- 菜品图片 -->
<img :src="el.imgurl" alt="">
<div class="order">
<!-- 菜品名称和价格 -->
<span>{{el.name}}</span>
<p>单价：{{el.price}}</p>
</div>
<div class="btn">
<!-- 添加和减少按钮 -->
<button @click="reduce(index)">-</button>
<span>{{el.count}}</span>
<button @click="add(index)">+</button>
</div>
</div>
<!-- 总价 -->
<div class="total" :style="{display:m}">总价：{{total}}元</div>
<div class="title":style={display:n}>还没点哟！</div>
</div>
<script>
new Vue({
el:'#app',
data: {
arr:[{
id:123,
name:"重庆鸡公煲",
imgurl:"./img/3.jpg",
price:12,
count:0,
},{
id:124,
name:"砂锅米线",
imgurl:"./img/4.jpg",
price:5,
count:0,
},{
id:125,
name:"凉拌猪耳朵",
imgurl:"./img/5.jpg",
price:10,
count:0
},{
id:126,
name:"麻辣干锅",
imgurl:"./img/9.jpg",
price:29,
count:0,
},{
id:127,
name:"辣子鸡",
imgurl:"./img/10.jpg",
price:34,
count:0,
},{
id:128,
name:"橙子",
imgurl:"./img/12.jpg",
price:20,
count:0,
}
],
m:"block",
n:"none"
},
methods: {
// 减少按钮
reduce(index){
// 点击按钮后减少count数量
this.arr[index].count--
// 当count数量减少为-1时移除菜品
if(this.arr[index].count==-1){
console.log(22222,this.arr.length,index)
this.arr.splice(index,1)
// 当删除完所有菜品时刷新页面，结束退出函数
if(this.arr.length==0){
this.m="none"
this.n="block"
this.arr=[]
return
}
}
// 刷新页面
Vue.set(this.arr,0,this.arr[0])
},
// 增加按钮
add(index){
// 增加菜品数量
this.arr[index].count++
// 刷新页面
Vue.set(this.arr,0,this.arr[0])
}
},
computed: {
// 计算总价
total(){
var all=0
this.arr.forEach(el => {
all+=el.count*el.price
});
return all
}
}
})
</script>
</body>
</html>
遇到的问题：
- 键点击任意一个按钮增加或者减少菜品数量时其他菜品数量也要变化：没有每个盒子绑定key值，将每个菜品都带上独一无二的id使用for循环遍历数组生成盒子时给每个盒子都绑定key值。
- 设置减少按钮时，移除到最后一个盒子时移除不掉：因为我刷新页面的语句是将数组的第一个的值设置成为第一个本身的值，当我们删除最后一个值时，数组里面就空了，这时再执行书信语句就会报错，所以我们就需要添加一个判断，当数组长度为0 时就将arr设置为一个空数组来书信页面，使用return跳出函数完成页面最后一个菜品的删除
Vue计算属性案例-----菜单页面计算相关推荐
- Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性 函数什么情况下调用、案例）
目录 计算属性(面试) 1.计算属性简介 2.计算属性和方法的区别:(面试) 3.关于计算属性 函数什么情况下调用 4.案例:购物车页面计算总价 计算属性(面试) 1.计算属性简介 把c ...
- Vue — 第三天（计算属性和json-server）
计算属性 使用场景 如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 例如:要对给定的字符串做翻转处理之后再来显示. <div id ...
- vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网 一 .class.style操作 二.事件 三.计算属性 四.数据监听.观测 五.指令+自定义指令 六.过滤器 一 .class.style操作 官网 1. class使用: (1)v-b ...
- Vue 过滤器、计算属性、侦听器 图解版 一目了然
文章目录 本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法 情况1: 根 ...
- vue过滤器和侦听器和计算属性
过滤器和侦听器和计算属性 1. 过滤器 1.1基本用法 1.2私有过滤器和全局过滤器 1.3 Dayjs 1.4 连续调用多个过滤器 1.5 过滤器传参 1.6 兼容性 2. watch 侦听器 2. ...
- Vue2.（过滤器，Watch侦听器，计算属性，购物车案例）
目录 过滤器 1.定义过滤器 2.私有过滤器和全局过滤器 3.连续调用多个过滤器 4.过滤器传参 5.过滤器的注意点 watch 侦听器(监视数据的变化) 1.使用 watch 检测用户名是否可用 2 ...
- vue属性_computed(计算属性)methods(方法)
目录 1.计算属性 2.计算方法 3.深入理解计算属性 当需要使用大量逻辑时,若直接放在模板中会使得模板过重且难以维护,如下例 <div id="app">{{ mes ...
- 一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性
一.插值操作 1. Mustache 如何将data中的文本数据,插入到HTML中呢? 我们已经学习过了,可以通过Mustache语法(也就是双大括号). Mustache: 胡子/胡须. 我们可以像 ...
- （15）Vue.js 计算属性
• Vue.js 的视图不建议书写复杂逻辑,这样不利于维护. • Vue.js 的视图不建议书写复杂逻辑,这样不利于维护. 封装函数是很好的方式,但有时重复的计算会消耗不必要的性能. 再methods ...
最新文章
- [转]SAP ABAP中使用Read_Text函数读取项目文本的方法
- MVC、MVP、MVVM，我到底该怎么选？
- SAP UI5 main page design
- html校园首页设计说明范文,网页设计作品设计说明-必看请相互转告
- 【英语学习】【加州教材】【G4】【科学】Science目录及术语表
- Hadoop 信息集成平台，让大数据分析更简单！
- TextView图文混排
- php数学和时间常用函数有哪些（总结表）（看学习视频效率挺高的）（复习）...
- C++多线程并发（五）---原子操作与无锁编程
- 计算机显示器模糊,电脑显示器模糊了怎么办？
- 博士申请 | 阿尔伯塔大学招收人工智能方向全奖博士生、硕士生
- Unable to start embedded Tomcat 解决方式（已解决）
- The Python Challenge Level-4 Solution
- 第九周项目——穷举法之三色球
- 如何重新设置苹果id密码_苹果ID密码忘记应该怎么做
- 升级Python2.7导致使用pip等命令安装模块失败
- 每日一道leetcode（python）77. 组合
- 初三英语关于计算机的作文,关于介绍电脑的英语作文初三80词左右急
- 用python读取股票价格_我用Python分析股票价格走势，学以致用获取第一桶金！
- 球场外也有比赛，央视影音逆袭世界杯，极速高清全靠腾讯云
热门文章
- 关闭任务栏右下角盾牌图标
- 什么是边框回归Bounding-Box regression，以及为什么要做、怎么做
- Macbook Pro 副屏 - Gobigger 4k 便携屏使用体验
- 支付系统中的设计模式02：构造器与策略模式
- 【ES笔记02】ElasticSearch数据库之查询操作（match、must、must_not、should、_source、filter、range、exists、ids、term、terms）
- 数据库锁表原因及解决思路
- 电脑关机重启 鼠标键盘不能用解决方法
- Steam VR虚拟现实手柄交互
- mvn help:effective-pom 报错 Failed to execute goal org.apache.maven.plugins
- C# asp.net的定时发送