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中,我们更应该专注 ...
随机推荐
- 【java虚拟机】jvm调优
转自:https://www.cnblogs.com/starhu/p/6400348.html?utm_source=itdadao&utm_medium=referral 堆大小设置JVM ...
- 14.SpringMVC之文件上传下载
SpringMVC通过MultipartResolver(多部件解析器)对象实现对文件上传的支持. MultipartResolver是一个接口对象,需要通过它的实现类CommonsMultipart ...
- 【ArcEngine】AE连接SDE_For_SQLServer参数设置
SDE for sqlserver直连的ArcEngine访问 Ae中的数据的连接实质还是采用服务连接的方式.连接代码如下: 1 public IWorkspace Getworkspace() 2 ...
- VMware虚拟机 + ubuntu16.04 Linux OpenCV打不开摄像头解决办法
通过如下步骤,已解决:(不知哪个步骤是关键,全写下来) sudo apt-get update sudo apt-get upgrade 在Windows下先确认摄像头能正常读取. USB控制器选择U ...
- java对象的引用级别
解释 在java中也有引用的概念,其实就可以认为是变量.标题中的引用级别是指变量与对象之前的引用级别.java中分为4种,按引用强弱关系排序分别是:强引用.软引用.弱引用.虚引用. 强引用(Stron ...
- 如何攻击Java Web应用
越来越多的企业采用Java语言构建企业Web应用程序,基于Java主流的框架和技术及可能存在的风险,成为被关注的重点. 本文从黑盒渗透的角度,总结下Java Web应用所知道的一些可能被利用的入侵点. ...
- 过WAF的小思路
过WAF的小思路 前言 最近在学习了一波CMS漏洞,尝试看了几个菠菜站,有宝塔WAF...向WHOAMI大佬取经回来后,绕过了一个WAF.觉得是时候要认真总结一下了:) 前期的过程 菠菜采用的是Thi ...
- Python网络爬虫——京东商城商品列表
Python_网络爬虫--京东商城商品列表 最近在拓展自己知识面,想学习一下其他的编程语言,处于多方的考虑最终选择了Python,Python从发布之初就以庞大的用户集群占据了编程的一席之地,pyth ...
- QT开发实战一：图片显示
测试平台 宿主机平台:Ubuntu 12.04.4 LTS 目标机:Easy-ARM IMX283 目标机内核:Linux 2.6.35.3 QT版本:Qt-4.7.3 Tslib版本:tslib-1 ...
- IPSec协议框架
文章目录 1. IPSec简介 1.1 起源 1.2 定义 1.3 受益 2. IPSec原理描述 2.1 IPSec协议框架 2.1.1 安全联盟 2.1.2 安全协议 报文头结构 2.1.3 封装 ...