<!DOCTYPE html>
<html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script src="js/vue.js"></script>
  7. <!-- CSS -->
  8. <link rel="stylesheet" type="text/css" href="css/bootstrap4.min.css"/>
  9. </head>
  10. <body>
  11. <div id="app">
  12. <input type="text" placeholder="请输入商品名称" class="form-control" style="width: 300px;margin: 20px;" v-model="word">
  13. <table class="table">
  14. <tr>
  15. <th>选择</th>
  16. <th>序号</th>
  17. <th>商品图片</th>
  18. <th>商品名称</th>
  19. <th>商品单价</th>
  20. <th>商品小计</th>
  21. <th>购买数量</th>
  22. <th>操作</th>
  23. </tr>
  24.  
  25. <tr v-for="(v,k) in res">
  26. <th><input type="checkbox" v-model="v.is_check"></th>
  27. <th>{{k+1}}</th>
  28. <th><img :src="v.goods_img" alt="无法识别" width="100" height="100"></th>
  29. <th>{{v.goods_name}}</th>
  30. <th>{{v.goods_price.toFixed(2)}}</th>
  31. <th>{{v.goods_sum.toFixed(2)}}</th>
  32. <th>
  33. <button type="button" class="btn btn-primary" @click="jian(k)">-</button>
  34. {{v.goods_num}}
  35. <button type="button" class="btn btn-primary" @click="jia(k)">+</button>
  36. </th>
  37. <th>
  38. <button type="button" class="btn btn-danger" @click="del(k)">删除</button>
  39. </th>
  40. </tr>
  41. </table>
  42.  
  43. <p>
  44. 您当前选中<label style="color: red;font-size: 20px;font-weight: bold;">{{count}}</label>件商品,
  45. 总价为:¥<label style="color: red;font-size: 20px;font-weight: bold;">{{priceSum}}</label>
  46. </p>
  47.  
  48. <button type="button" class="btn btn-primary" @click="fun1()">全选</button>
  49. <button type="button" class="btn btn-primary" @click="fun2()">全不选</button>
  50. <button type="button" class="btn btn-primary" @click="fun3()">反选</button>
  51. <button type="button" class="btn btn-danger" @click="fun4()">批量删除</button>
  52.  
  53. </div>
  54. </body>
  55. </html>
  56. <script>
  57. new Vue({
  58. el:"#app",
  59. data:{
  60. word:'',
  61. list:[
  62. {
  63. goods_name:'李白-凤求凰',//名称
  64. goods_img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=182292951,1294008673&fm=26&gp=0.jpg',//图片
  65. goods_price:1688,//单价
  66. goods_num:1,//购买数量
  67. goods_sum:1688,//小计
  68. is_check:false
  69. },
  70. {
  71. goods_name:'镜-炽热神光',//名称
  72. goods_img:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1257477182,1700333640&fm=11&gp=0.jpg',//图片
  73. goods_price:1688,//单价
  74. goods_num:1,//购买数量
  75. goods_sum:1688,//小计
  76. is_check:false
  77. },
  78. {
  79. goods_name:'露娜-紫霞仙子',//名称
  80. goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=162561561,435847683&fm=26&gp=0.jpg',//图片
  81. goods_price:888,//单价
  82. goods_num:1,//购买数量
  83. goods_sum:888,//小计
  84. is_check:false
  85. },
  86. {
  87. goods_name:'孙悟空-地狱火',//名称
  88. goods_img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2932847835,1578465715&fm=26&gp=0.jpg',//图片
  89. goods_price:1688,//单价
  90. goods_num:1,//购买数量
  91. goods_sum:1688,//小计
  92. is_check:false
  93. },
  94. {
  95. goods_name:'貂蝉-异域舞娘',//名称
  96. goods_img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=381785760,2363478747&fm=15&gp=0.jpg',//图片
  97. goods_price:288,//单价
  98. goods_num:1,//购买数量
  99. goods_sum:288,//小计
  100. is_check:false
  101. }
  102. ]
  103. },
  104. methods:{
  105. jia(index){
  106. var obj = this.list[index]
  107. obj.goods_num++
  108. obj.goods_sum = obj.goods_num*obj.goods_price
  109. },
  110. jian(index){
  111. var obj = this.list[index]
  112. obj.goods_num = obj.goods_num-1 <= 1 ? 1 : obj.goods_num-1
  113. obj.goods_sum = obj.goods_num*obj.goods_price
  114. },
  115. del(index){
  116. if(confirm('确定要删除吗?')){
  117. this.list.splice(index,1)
  118. }
  119. },
  120. fun1(){
  121. this.list.map(function(v,k){
  122. v['is_check'] = true
  123. })
  124. },
  125. fun2(){
  126. this.list.map(function(v,k){
  127. v['is_check'] = false
  128. })
  129. },
  130. fun3(){
  131. this.list.map(function(v,k){
  132. if(v['is_check']){
  133. v['is_check'] = false
  134. }else{
  135. v['is_check'] = true
  136. }
  137. })
  138. },
  139. fun4(){
  140. if(confirm('确定要删除所选内容吗?')){
  141. //把不删除的拿出来
  142. var arr = []
  143. this.list.map(function(v,k){
  144. if(v['is_check']==false){
  145. arr.push(v)
  146. }
  147. })
  148. this.list = arr
  149. }
  150. }
  151. },
  152. computed:{
  153. res(){
  154. var word = this.word
  155. if(word==''){
  156. return this.list
  157. }else{
  158. var arr = []
  159. this.list.map(function(v,k){
  160. if(v.goods_name.indexOf(word)>-1){
  161. arr.push(v)
  162. }
  163. })
  164. return arr;
  165. }
  166. },
  167. count(){
  168. var i=0
  169. this.list.map(function(v,k){
  170. if(v['is_check']){
  171. i+=1
  172. }
  173. })
  174. return i;
  175. },
  176. priceSum(){
  177. var i=0;
  178. this.list.map(function(v,k){
  179. if(v['is_check']){
  180. // console.log();
  181. i += v['goods_sum']
  182. }
  183. })
  184.  
  185. return i.toFixed(2);
  186. }
  187. }
  188. })
  189. </script>

vue成就购物城的功能 (展示增删改查)的更多相关文章

  1. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  2. 永远不要眼高手低,Vue完整实现一套简单的增删改查CURD操作

    1: 永远不要眼高手低,看起来很简单,但是你从来没有去动手试一下,就不知道其中真正需要注意的许多细节, 2:完整code如下: 1 <!DOCTYPE html> 2 <html l ...

  3. Vue 里面对树状数组进行增删改查 的方法

    [{"id":"5e4c3b02fc984961a17607c37712eae0", "optLock":0, "parentId ...

  4. Oracle-常用表的查询、增加列、删除列、修改列值功能【增删改查】

    #查看表 select * from `竟企区域数据分析` #在表第一列新增名为"年月"的列alter table `竟企区域数据分析` add column 年月 varchar ...

  5. 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 整合 ...

  6. java实现单链表增删改查

    package 数据结构算法.链表; /* *定义节点 * 链表由节点构成 */ public class Node<E> { private E e; //数据data private ...

  7. Java代码自动生成,生成前端vue+后端controller、service、dao代码,根据表名自动生成增删改查功能

    本项目地址:https://github.com/OceanBBBBbb/ocean-code-generator 项目简介 ocean-code-generator采用(适用):     ,并使用m ...

  8. JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  9. vue实现对表格数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

随机推荐

  1. 测试框架unit之assertion断言使用详解

    NUnit是.Net平台的测试框架,广泛用于.Net平台的单元测试和回归测试中,下面我们用示例详细学习一下他的使用方法 任何xUnit工具都使用断言进行条件的判断,NUnit自然也不例外,与其它的xU ...

  2. 【C#】GC和析构函数(Finalize 方法)

    析构函数: (来自百度百科)析构函数(destructor) 与构造函数相反,当对象脱离其作用域时(例如对象所在的函数已调用完毕),系统自动执行析构函数.析构函数往往用来做"清理善后&quo ...

  3. Qt MDI及其使用方法(详解版)

    统的应用程序设计中有多文档界面(Multi-document Interface,MDI)应用程序,Qt 为设计 MDI 应用程序提供了支持. 本节的实例 samp6_4 是一个 MDI 应用程序,程 ...

  4. JSOUP教程目录

    入门: 1.解析和遍历一个HTML文档 输入: 2.解析一个HTML字符串 3.解析一个body片断 4.从一个URL加载一个Document 5.从一个文件加载一个文档 数据抽取: 6.使用DOM方 ...

  5. SpringBoot2.0整合Quartz定时任务(持久化到数据库,更为简单的方式)

    1. pom文件添加依赖 <dependencies> <dependency> <groupId>org.springframework.boot</gro ...

  6. 九:Decorator设计模式

    二.使用Decorator设计模式增强request对象 Servlet API 中提供了一个request对象的Decorator设计模式的默认实现类HttpServletRequestWrappe ...

  7. 虚拟机--第二章java内存区域与内存溢出异常--(抄书)

    这是本人阅读周志明老师的<深入理解Java虚拟机>第二版抄写的,有很多省略,不适合直接阅读,需要阅读请出门左转淘宝,右转京东,支持周老师(侵权请联系删除) 第二章java内存区域与内存溢出 ...

  8. 从eclipse转idea不适记录【持续更新】

    使用eclipse和idea时,快捷键对比 从一些最扎心的开始: 关于print一类的打印输出:System.out.println()补全 idea中可以sout.souf.serr:分别对应out ...

  9. js函数和封装

    $就是jquery对象,$()就是jQuery(),在里面可以传参数,作用就是获取元素 js对象与jQuery对象的区别:jQuery对象是一个数组,jQuery对象转为js对象:[0] 取第一个即可 ...

  10. 云原生数据库 TDSQL-C 产品概述、产品优势、应用场景

    云原生数据库 TDSQL-C(Cloud Native Database TDSQL-C,TDSQL-C)是腾讯云自研的新一代高性能高可用的企业级分布式云数据库.融合了传统数据库.云计算与新硬件技术的 ...