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中,我们更应该专注 ...
随机推荐
- WPF 显示3D密集场景，堆场管理系统
又好久好久没写博客了,这次接着上文https://www.cnblogs.com/CSSZBB/p/12785380.html,上文用WPF 的绘图功能,制作了一个伪3D的2.5D控件ThreeDBo ...
- C语言预处理编译链接各个阶段错误，分阶段的说一下
C语言预处理编译链接各个阶段错误,分阶段的说一下 C语言预处理编译链接各个阶段错误,分阶段的说一下比如指针异常,数组下标越界什么的 我来答 1个回答 #热议# 你觉得这辈子有希望看到996消失 ...
- CPU 进程 线程 关系与区别
- Java程序设计学习笔记（五） — 多线程
时间:2016-4-15 09:56 --多线程(还有多核编程) 1.进程 进程是一个正在执行中的程序. 每一个进程执行都有一个执行顺序,该顺序是一个执行路径, ...
- Linux centos 安装 maven 3.5.4
一.maven下载 1.官方下载 打开网址:http://maven.apache.org/download.cgi 下拉滚动条,找到标记处并点击 选择自己想要的版本,我这里选择的是 3.5.4,然后 ...
- linux使用xampp安装MediaWiki环境
1.下载并安装xampp 下载xampp 在下载页面下载. 放置到相应目录 将xampp-linux-x64-5.6.3-0-installer.run文件复制到部署机器的/root目录下 安装 [r ...
- 高德地图——步行路线&步行路线的坐标规划
步行操作与开车一样 唯一区别就是src末尾加入&plugin=AMap.Walkling 以及new AMap.Walking({}) <!DOCTYPE html> <ht ...
- Nginx location 和 proxy_pass路径配置详解
目录 一.Nginx location 基本配置 1.1.Nginx 配置文件 1.2 .Python 脚本 二.测试 2.1.测试 location 末尾存在 / 和 proxy_pass末尾存在 ...
- Linux centos7 scp命令
1. 命令简介 scp(secure copy) 是 linux 系统下基于 ssh 登陆进行安全的远程文件拷贝命令,可以在两台 Linux 主机进行复制操作 # 语法 scp [-1246BCpqr ...
- 过WAF的小思路
过WAF的小思路 前言 最近在学习了一波CMS漏洞,尝试看了几个菠菜站,有宝塔WAF...向WHOAMI大佬取经回来后,绕过了一个WAF.觉得是时候要认真总结一下了:) 前期的过程 菠菜采用的是Thi ...