vue成就购物城的功能 （展示增删改查）
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap4.min.css"/>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入商品名称" class="form-control" style="width: 300px;margin: 20px;" v-model="word">
<table class="table">
<tr>
<th>选择</th>
<th>序号</th>
<th>商品图片</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品小计</th>
<th>购买数量</th>
<th>操作</th>
</tr> <tr v-for="(v,k) in res">
<th><input type="checkbox" v-model="v.is_check"></th>
<th>{{k+1}}</th>
<th><img :src="v.goods_img" alt="无法识别" width="100" height="100"></th>
<th>{{v.goods_name}}</th>
<th>{{v.goods_price.toFixed(2)}}</th>
<th>{{v.goods_sum.toFixed(2)}}</th>
<th>
<button type="button" class="btn btn-primary" @click="jian(k)">-</button>
{{v.goods_num}}
<button type="button" class="btn btn-primary" @click="jia(k)">+</button>
</th>
<th>
<button type="button" class="btn btn-danger" @click="del(k)">删除</button>
</th>
</tr>
</table> <p>
您当前选中<label style="color: red;font-size: 20px;font-weight: bold;">{{count}}</label>件商品，
总价为：￥<label style="color: red;font-size: 20px;font-weight: bold;">{{priceSum}}</label>
</p> <button type="button" class="btn btn-primary" @click="fun1()">全选</button>
<button type="button" class="btn btn-primary" @click="fun2()">全不选</button>
<button type="button" class="btn btn-primary" @click="fun3()">反选</button>
<button type="button" class="btn btn-danger" @click="fun4()">批量删除</button> </div>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
word:'',
list:[
{
goods_name:'李白-凤求凰',//名称
goods_img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=182292951,1294008673&fm=26&gp=0.jpg',//图片
goods_price:1688,//单价
goods_num:1,//购买数量
goods_sum:1688,//小计
is_check:false
},
{
goods_name:'镜-炽热神光',//名称
goods_img:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1257477182,1700333640&fm=11&gp=0.jpg',//图片
goods_price:1688,//单价
goods_num:1,//购买数量
goods_sum:1688,//小计
is_check:false
},
{
goods_name:'露娜-紫霞仙子',//名称
goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=162561561,435847683&fm=26&gp=0.jpg',//图片
goods_price:888,//单价
goods_num:1,//购买数量
goods_sum:888,//小计
is_check:false
},
{
goods_name:'孙悟空-地狱火',//名称
goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2932847835,1578465715&fm=26&gp=0.jpg',//图片
goods_price:1688,//单价
goods_num:1,//购买数量
goods_sum:1688,//小计
is_check:false
},
{
goods_name:'貂蝉-异域舞娘',//名称
goods_img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=381785760,2363478747&fm=15&gp=0.jpg',//图片
goods_price:288,//单价
goods_num:1,//购买数量
goods_sum:288,//小计
is_check:false
}
]
},
methods:{
jia(index){
var obj = this.list[index]
obj.goods_num++
obj.goods_sum = obj.goods_num*obj.goods_price
},
jian(index){
var obj = this.list[index]
obj.goods_num = obj.goods_num-1 <= 1 ? 1 : obj.goods_num-1
obj.goods_sum = obj.goods_num*obj.goods_price
},
del(index){
if(confirm('确定要删除吗？')){
this.list.splice(index,1)
}
},
fun1(){
this.list.map(function(v,k){
v['is_check'] = true
})
},
fun2(){
this.list.map(function(v,k){
v['is_check'] = false
})
},
fun3(){
this.list.map(function(v,k){
if(v['is_check']){
v['is_check'] = false
}else{
v['is_check'] = true
}
})
},
fun4(){
if(confirm('确定要删除所选内容吗？')){
//把不删除的拿出来
var arr = []
this.list.map(function(v,k){
if(v['is_check']==false){
arr.push(v)
}
})
this.list = arr
}
}
},
computed:{
res(){
var word = this.word
if(word==''){
return this.list
}else{
var arr = []
this.list.map(function(v,k){
if(v.goods_name.indexOf(word)>-1){
arr.push(v)
}
})
return arr;
}
},
count(){
var i=0
this.list.map(function(v,k){
if(v['is_check']){
i+=1
}
})
return i;
},
priceSum(){
var i=0;
this.list.map(function(v,k){
if(v['is_check']){
// console.log();
i += v['goods_sum']
}
}) return i.toFixed(2);
}
}
})
</script>
vue成就购物城的功能 （展示增删改查）的更多相关文章
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- 永远不要眼高手低，Vue完整实现一套简单的增删改查CURD操作
1: 永远不要眼高手低,看起来很简单,但是你从来没有去动手试一下,就不知道其中真正需要注意的许多细节, 2:完整code如下: 1 <!DOCTYPE html> 2 <html l ...
- Vue 里面对树状数组进行增删改查 的方法
[{"id":"5e4c3b02fc984961a17607c37712eae0", "optLock":0, "parentId ...
- Oracle-常用表的查询、增加列、删除列、修改列值功能【增删改查】
#查看表 select * from `竟企区域数据分析` #在表第一列新增名为"年月"的列alter table `竟企区域数据分析` add column 年月 varchar ...
- SSH（Struts 2.3.31 + Spring 4.1.6 + Hibernate 5.0.12 + Ajax）框架整合实现简单的增删改查（包含分页，Ajax 无刷新验证该用户是否存在）
软件152 余建强 该文将以员工.部门两表带领大家进入SSH的整合教程: 源码下载:http://download.csdn.net/detail/qq_35318576/9877235 SSH 整合 ...
- java实现单链表增删改查
package 数据结构算法.链表; /* *定义节点 * 链表由节点构成 */ public class Node<E> { private E e; //数据data private ...
- Java代码自动生成,生成前端vue+后端controller、service、dao代码,根据表名自动生成增删改查功能
本项目地址:https://github.com/OceanBBBBbb/ocean-code-generator 项目简介 ocean-code-generator采用(适用): ,并使用m ...
- JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
- vue实现对表格数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
随机推荐
- 【spring 注解驱动开发】spring事务处理原理
尚学堂spring 注解驱动开发学习笔记之 - 事务处理 事务处理 1.事务处理实现 实现步骤: * 声明式事务: * * 环境搭建: * 1.导入相关依赖 * 数据源.数据库驱动.Spring-jd ...
- vue 引入 leaflet1.4.0
安装leaflet cnpm install leaflet@~1.4.0 --save // 在main.js 中设置如下 //引入样式文件 import 'leaflet/dist/leaflet ...
- ORM 之 EF的使用(一)
早期对数据库进行操作 通过Ado.Net 操作数据库 需要操作sqlCommand/sqlConnection/adapter/datareader 如图 后来 基于面向对象的思想 出现了中间件ORM ...
- 怎样在Qt中建立使用动态链接库
参考网址: https://blog.csdn.net/q496713258/article/details/6990837 qt 的学习网址: http://c.biancheng.net/view ...
- 二、vue组件化开发（轻松入门vue）
轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...
- VMware虚拟机 + ubuntu16.04 Linux OpenCV打不开摄像头解决办法
通过如下步骤,已解决:(不知哪个步骤是关键,全写下来) sudo apt-get update sudo apt-get upgrade 在Windows下先确认摄像头能正常读取. USB控制器选择U ...
- Qt中QOpengl的QMatrix4x4矩阵作用原理以及使用方法
1.矩阵具有坐标变换的作用,例如:左乘一个旋转矩阵,实现点的坐标旋转,左乘一个平移矩阵实现,点的平移 2.一个点可以同时串联相乘几个变换矩阵,实现坐标连续变换,根据左乘规则,右边矩阵先作用于点,作用顺 ...
- python manage.py migrate出错
python manage.py migrate出错 在建立Django项目过程中执行 python manage.py migrate命令,出现如下错误: 解决办法: 编辑D:\install fi ...
- 知乎大佬图文并茂的epoll讲解，看不懂的去砍他
select.poll.epoll的文章很多,自己也看过不少经典好文.不过第一次看到讲的如此通俗易懂.又图文并茂的.因此拿来分享下,供后续翻看学习. 原文链接:https://zhuanlan.zhi ...
- 图像处理之Canny边缘检测（一）
一:历史 Canny边缘检测算法是1986年有John F. Canny开发出来一种基于图像梯度计算的边缘 检测算法,同时Canny本人对计算图像边缘提取学科的发展也是做出了很多的贡献.尽 管至今已经 ...