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 自定义 RadioButton.
<Style TargetType="RadioButton" x:Key="nav"> <Setter Property="Tem ...
- asp.net mvc 传值
视图的查找 asp.net MVC 不需要用using 释放资源
- yum 和 epel 的详解
一.概览 1.什么是repo文件 repo文件是Fedora中yum源(软件仓库)的配置文件,通常一个repo文件定义了一个或者多个软件仓库的细节内容,例如我们将从哪里下载需要安装或者升级的软件包,r ...
- Kickstart部署之NFS架构
原文转自:https://www.cnblogs.com/itzgr/p/10200615.html作者:木二 目录 一 准备 1.1 完整架构:Kickstart+DHCP+NFS+TFTP+PXE ...
- linux 查看用户密码
2021-07-26 1.查看前三个密码 head -3 / etc / passwd # 注解 /etc/passwd 中一行记录对应着一个用户,每行记录又被冒号 (:) 分隔为 7 个字段,其格式 ...
- Jenkins手动下载并安装插件
最近遇到Jenkins插件无法自动安装的问题,在插件管理页面的[升级站点]使用镜像url也无法解决.于是决定手动下载并安装Jenkins插件,具体步骤如下. Step1:进入Jenkins官网的插件下 ...
- C# 爬虫框架实现 概述
目录: C# 爬虫框架实现 概述 C# 爬虫框架实现 流程_爬虫结构/原理 C# 爬虫框架实现 流程_各个类开发 C# 爬虫框架实现 流程_遇到的问题 C# 爬虫框架实现 后记 C#爬虫框架实现 源代 ...
- poll?transport=longpoll&connection...烦人的请求c
1.问题描述: 最近使用miniui做了一个后台管理系统,打开浏览器调试时,总发现一堆无关的请求,结构大致是:poll?transport=longpoll&connection.....一直 ...
- Nacos注册中心之概要设计
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 前言 在之前的文章中分析了Nacos配置中心,配置中心的核心是配置的创建.读取.推送. 注册中 ...
- tomcat快速发布备份脚本
一.说明 我们每次在tomcat中发布新war包,总是要经历[备份-停机-上传-启动]这几个部分,其中上传的环节和网速有极大相关性,要是网速很慢,那么整个发布的时间就会很长. 如果我们不借助于自动化发 ...