vue3 （三）小案例简易小书架

案例效果：

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./style.css">
</head>
<body><div id="app"></div><template id="my-app"><template v-if="books.length > 0"><table><thead><th>序号</th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></thead><tbody><tr v-for="(book, index) in books"><td>{{index + 1}}</td><td>{{book.name}}</td><td>{{book.date}}</td><td>{{formatPrice(book.price)}}</td><td><button :disabled="book.count <= 1" @click="decrement(index)">-</button><span class="counter">{{book.count}}</span><button @click="increment(index)">+</button></td><td><button @click="removeBook(index)">移除</button></td></tr></tbody></table><h2>总价格: {{formatPrice(totalPrice)}}</h2></template><template v-else><h2>购物车为空~</h2></template></template><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script><script src="./index.js"></script></body>
</html>

index.js

Vue.createApp({template: "#my-app",data() {return {books: [{id: 1,name: '《算法导论》',date: '2006-9',price: 85.00,count: 1},{id: 2,name: '《UNIX编程艺术》',date: '2006-2',price: 59.00,count: 1},{id: 3,name: '《编程珠玑》',date: '2008-10',price: 39.00,count: 1},{id: 4,name: '《代码大全》',date: '2006-3',price: 128.00,count: 1},]}},computed: {// vue2: filter/map/reducetotalPrice() {let finalPrice = 0;for (let book of this.books) {finalPrice += book.count * book.price;}return finalPrice;},// Vue3不支持过滤器了, 推荐两种做法: 使用计算属性/使用全局的方法// filterBooks() {//   return this.books.map(item => {//     const newItem = Object.assign({}, item);//     newItem.price = "¥" + item.price;//     return newItem;//   })// }},methods: {increment(index) {// 通过索引值获取到对象this.books[index].count++},decrement(index) {this.books[index].count--},removeBook(index) {this.books.splice(index, 1);},formatPrice(price) {return "¥" + price;}}
}).mount("#app");

style.css

table {border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;
}th, td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;
}th {background-color: #f7f7f7;color: #5c6b77;font-weight: 600;
}.counter {margin: 0 5px;
}

vue3 （三）小案例简易小书架相关推荐

C语言小案例_小程序学习（三）
小程序学习--页面设置案例一 float页面布局效果 1.案例的整体介绍设计一个小程序,利用float布局来实现页面的布局效果.有两种效果分别是上左右下和上左中右下. 2.案例的代码详解 (1) ...
微信小程序 - 实战小案例 - 简易记事本
多项技能,好像也不错.学习一下微信小程序. 教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ 简介:一套用来开发在手机微信上运行的app框架,不用安装组成: ...
黑桃k游戏java实战_#Java小案例扑克牌小游戏
知识点: 1.Collections.sort; 2.do while确保不重复; 3.重写compare 比较规则; 主要的对象有 1.玩家 (ID.姓名.手牌列表) 2.卡牌(花色.点数) 1.玩 ...
还在观望？CocosCreator3D小案例《小鸭快跑》新鲜出炉！
摘要 CocosCreator 的 3D 版本正式上线!激动干嘛? 愣着啊! KUOKUO 正好手里有个小鸭子模型,于是就把它做成了一个小游戏. 正文风骚的走位系统事件来监听触摸 cc.syste ...
java ssm小案例_简易的SSM框架整合小案例
简易的SSM框架整合小案例一.创建一个web工程的maven项目 1.项目名随便起 2.选择好你的maven路径,然后finish 二.配置pom.xml文件 org.springframework ...
vue3 组件拖拽小案例
vue3 实现组件拖拽小案例一.实现效果将不同组件拖拽至展示区展示拖拽前拖拽后,取消后还原(没有动态演示真抱歉) 二.实现过程页面基本样式 <template><div c ...
vue3.0网易云音乐及入门小案例
前言之前学习vue3.0时做了几个小案例,近段时间又找了几个案例想着把之前做的那些和现在做的放在一起于是休息的时候就搭建了一个vue3的项目.这个项目所用的数据都是页面上写死的,音乐播放器数据是调用 ...
python计算银行余额_Python 小案例实战 —— 简易银行存取款查询系统
Python 小案例实战 -- 简易银行存取款查询系统涉及知识点包的调用字典.列表的混合运用列表元素索引.追加基本的循环与分支结构源码 import sys import time ban ...
【Android笔记65】Android小案例之简易版的房贷计算器（附源代码）
这篇文章,主要介绍如何使用Android实现一个简易版的房贷计算器小案例. 目录一.房贷计算器 1.1.运行效果演示 1.2.前提准备 (1)等额本息和等额本金

vue3 （三）小案例简易小书架

案例效果：

html

index.js

style.css

vue3 （三）小案例简易小书架相关推荐

最新文章

热门文章

vue3 （三） 小案例 简易小书架

案例效果：

html

index.js

style.css

vue3 （三） 小案例 简易小书架相关推荐

最新文章

热门文章

vue3 （三）小案例简易小书架

vue3 （三）小案例简易小书架相关推荐