简易版购物车案例(vue)

<div id="app"><div v-if="books.length"><table><thead><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></thead><tbody><tr v-for="(item,index) in books"><!-- 1.item是对象 遍历对象 --><!-- <td v-for="value in item">{{value}}</td> --><!-- 2. --><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.data}}</td><td> {{item.price | showPrice}}</td><td><button @click="sub(index)" v-bind:disabled="item.number  <= 1">-</button>{{item.number}}<!-- disabled禁用 --><button @click="add(index)">+</button></td><td @click="remove"><a href="#">删除</a></td></tr></tbody></table><h2>总价{{totalnumber|showPrice}}</h2></div><div v-else>购物车为空</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {books: [{id: 1,name: "书籍1",data: "2006-9",price: 88,number: 1}, {id: 2,name: "书籍1",data: "2006-9",price: 88,number: 1}, {id: 3,name: "书籍1",data: "2006-9",price: 88,number: 1}, {id: 4,name: "书籍1",data: "2006-9",price: 88,number: 1}, {id: 5,name: "书籍1",data: "2006-9",price: 88,number: 1}]},methods: {sub(index) {// console.log(index);// if (//     this.books[index].number > 1// )this.books[index].number--},add(index) {this.books[index].number++},remove(index) {this.books.splice(index, 1)}},// 过滤器filters: {showPrice(price) {return "￥" + price.toFixed(2)}},computed: {totalnumber() {// 1.普通方法// let total = 0// for (let i = 0; i < this.books.length; i++) {//     total += this.books[i].price * this.books[i].number// }// return total// 2.// let total = 0//     for (let i of this.books) {//         total += this.books[i].price * this.books[i].number//     }//     return total// 3.let total = 0for (let item of this.books) {total += item.price * item.number}return total}}})</script>

<style>table {border: 1px solid #000;border-collapse: collapse;border-spacing: 0;}th,td {padding: 8px 16px;border: 1px solid #000;text-align: left;}th {background-color: #f7f7f7;color: #5c6b77;font-weight: 600;}</style>

简易版购物车案例(vue)相关推荐

Vue版todolist案例
Vue版todolist案例 todolist – 记录你的待办事项 <!DOCTYPE html> <html><head><meta charset=&q ...
手写简易版Vue源码之数据响应化的实现
当前,Vue和React已成为两大炙手可热的前端框架,这两个框架都算是业内一些最佳实践的集合体.其中,Vue最大的亮点和特色就是数据响应化,而React的特点则是单向数据流与jsx. 笔者近期正在研究 ...
vue鼠标悬停出现悬浮框（简易版实现）
vue鼠标悬停出现悬浮框(简易版实现) 使用一个变量来控制悬浮框显示和隐藏,注意:这是简易版实现,其他功能需自行开发: 代码如下: <template><div><div ...
【Android笔记65】Android小案例之简易版的房贷计算器（附源代码）
这篇文章,主要介绍如何使用Android实现一个简易版的房贷计算器小案例. 目录一.房贷计算器 1.1.运行效果演示 1.2.前提准备 (1)等额本息和等额本金
Vue 购物车案例黑马学院
项目初始化: 需求1:从0新建项目需求2:分拆组件,创建组件文件分析: ①:vue命令创建项目(在根目录下运行) vue create shopcar-deom ②:下载需要得配置: yarn a ...
Axure 9 实战案例，动态面板的应用 4.1，省市区三级联动下拉菜单（重制简易版）
前言 Hello!欢迎来到Axure 9 实战案例教程专栏. 本次课程我们继续来学习一下,动态面板的应用.本篇我们来讲解一下,如何绘制省市区联动下拉菜单(重新撰写简易版). 下拉菜单初稿为了节省时间 ...
01、Vue简易版网易云——项目简介
1.项目介绍在经过一段时间Vue的学习之后,本人决定用一个简易版的网易云项目,对Vue的知识进行进一步的巩固. 项目完整github地址 2.项目技术 1.后台技术本次后台使用的是,别人写好的网络 ...
vue简易计算器小案例09
简易计算器小案例逻辑部分没有完全实现,主要用来练手,加强理解父子组件之间的通信过程. 效果: 简易计算器代码 counter.html <!DOCTYPE html> <html ...
vue之购物车案例升级版、v-model之lazy、number、trim的使用、fetch和axios、计算属性、Mixins、虚拟dom与diff算法 key的作用及组件化开发
文章目录 1.购物车案例升级版(含价格统计.全选/反选.商品增加减少) 2.v-model之lazy.number.trim的使用 3.fetch和axios 3.1.通过jquery+ajax实现v ...

简易版购物车案例(vue)

简易版购物车案例(vue)

简易版购物车案例(vue)相关推荐

最新文章

热门文章