用vue写一个计算总价

点击移除可以删除本项
点击加减实现加减
总价随着数量增加

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><table border="0" cellspacing="5" cellpadding="9"><tr><th>id</th><th>书籍名称</th><th>出版日期</th><th>购买价格</th><th>数量</th><th>操作</th></tr><tr v-for="item in list"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.riqi}}</td><td>${{item.jiage}}</td><td><button @click="sub(item)">-</button>{{item.n1}}<button @click="add(item)">+</button></td><td><button @click="delTtem(item)">移除</button></td></tr></table><p>总价格：{{totalPrice()}}</p></div><script type="text/javascript">new Vue({el: "#app",data: {list:[{id:1,name:"小绿书",riqi:"2002-9",jiage:"100.00",n1:"1"},{id:2,name:"小红书",riqi:"2016-9",jiage:"16700.00",n1:"1"},{id:3,name:"发生的书",riqi:"2026-9",jiage:"600.00",n1:"1"},{id:4,name:"奥古斯卡",riqi:"2004-9",jiage:"3455.00",n1:"1"},{id:5,name:"阀手动阀",riqi:"2046-9",jiage:"7983.00",n1:"1"},],},methods:{//减sub(item){item.n1--if(item.n1<0){item.n1=0}},//加add(item){item.n1++if(item.n1>999){item.n1=999}},//移除delTtem(item){var ind = this.list.findIndex(value=>value.id===item.id)this.list.splice(ind,1)},// 总价totalPrice(){var totalPrice=0;for(let i=0;i<this.list.length;i++){totalPrice += this.list[i].jiage * this.list[i].n1;}return totalPrice;}}})</script></body>
</html>

用vue写一个计算总价相关推荐

[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
用vue写一个npm包(package)，发布及引用
提示:vue写一个npm包(package) 文章目录前言一.npm 二.npm package开发三.引用package 总结前言之前一直都是用别人封装好的npm包,新接了一个需求,自己写 ...
利用Html,Css,javaScript简单写一个计算一天秒的倒计时
利用Html,Css,javaScript简单写一个计算一天还剩多少秒的倒计时页面代码我放下面,不多,就是我那个背景图我没有用精灵图,主要拼接太麻烦了,我直接img了,然后display:none; ...
如何用python写一个计算日期间隔的程序？
如何用python写一个计算日期间隔的程序? 文章目录如何用python写一个计算日期间隔的程序? 前言问题梳理问题解决写在后面前言为什么想起来写一个这样的程序呢? 前几天聊天的时候,突然 ...
VUE写一个本地教室管理系统
VUE写一个本地教室管理系统实现效果主体模态框 Vue JS主体 Vue实现删除功能 splice语法 Vue实现添加功能 push()语法 Vue实现修改功能源码实现效果点击添加按钮后, ...
用Vue写一个简单好看的菜单组件（Vue实战系列）
一.需求实现一个左边栏菜单,菜单只包括两层: 点击出现水波纹效果: 激活效果:有一个绿球小点,标识激活的菜单,顶层菜单被激活时左边出现浅色激活标志: 二.实现新建一个菜单组件whrmenu pro ...
Vue购物车功能计算总价/全选/删除
要求功能实现初始页面功能1:删除点击删除操作后,整行可以被删除. 功能2:全选当所有商品都被勾选上是,全选按钮也勾上,当全选按钮勾上时,所有商品都被勾选上. 功能3:计算总价当输入商品数量 ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...
python计算时间装饰器_python 写一个计算运行时间的装饰器
面试题之中的一个. 写一个装饰器wraps,它接收一个參数t.假设函数运行时间超过1秒,输出"bad",否则输出"goods". 首先,计算函数的运行时间: i ...

用vue写一个计算总价

用vue写一个计算总价

用vue写一个计算总价相关推荐

最新文章

热门文章