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中,我们更应该专注 ...
随机推荐
- 测试框架unit之assertion断言使用详解
NUnit是.Net平台的测试框架,广泛用于.Net平台的单元测试和回归测试中,下面我们用示例详细学习一下他的使用方法 任何xUnit工具都使用断言进行条件的判断,NUnit自然也不例外,与其它的xU ...
- 【C#】GC和析构函数(Finalize 方法)
析构函数: (来自百度百科)析构函数(destructor) 与构造函数相反,当对象脱离其作用域时(例如对象所在的函数已调用完毕),系统自动执行析构函数.析构函数往往用来做"清理善后&quo ...
- Qt MDI及其使用方法(详解版)
统的应用程序设计中有多文档界面(Multi-document Interface,MDI)应用程序,Qt 为设计 MDI 应用程序提供了支持. 本节的实例 samp6_4 是一个 MDI 应用程序,程 ...
- JSOUP教程目录
入门: 1.解析和遍历一个HTML文档 输入: 2.解析一个HTML字符串 3.解析一个body片断 4.从一个URL加载一个Document 5.从一个文件加载一个文档 数据抽取: 6.使用DOM方 ...
- SpringBoot2.0整合Quartz定时任务(持久化到数据库,更为简单的方式)
1. pom文件添加依赖 <dependencies> <dependency> <groupId>org.springframework.boot</gro ...
- 九:Decorator设计模式
二.使用Decorator设计模式增强request对象 Servlet API 中提供了一个request对象的Decorator设计模式的默认实现类HttpServletRequestWrappe ...
- 虚拟机--第二章java内存区域与内存溢出异常--(抄书)
这是本人阅读周志明老师的<深入理解Java虚拟机>第二版抄写的,有很多省略,不适合直接阅读,需要阅读请出门左转淘宝,右转京东,支持周老师(侵权请联系删除) 第二章java内存区域与内存溢出 ...
- 从eclipse转idea不适记录【持续更新】
使用eclipse和idea时,快捷键对比 从一些最扎心的开始: 关于print一类的打印输出:System.out.println()补全 idea中可以sout.souf.serr:分别对应out ...
- js函数和封装
$就是jquery对象,$()就是jQuery(),在里面可以传参数,作用就是获取元素 js对象与jQuery对象的区别:jQuery对象是一个数组,jQuery对象转为js对象:[0] 取第一个即可 ...
- 云原生数据库 TDSQL-C 产品概述、产品优势、应用场景
云原生数据库 TDSQL-C(Cloud Native Database TDSQL-C,TDSQL-C)是腾讯云自研的新一代高性能高可用的企业级分布式云数据库.融合了传统数据库.云计算与新硬件技术的 ...