小项目总结
时间:2019-10-28
本文章向大家介绍小项目总结,主要包括小项目总结使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> </head> <body> <div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th>书id</th> <th>书名</th> <th>日期</th> <th>书价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(book, index) in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.data}}</td> <!--<td>{{'¥' + book.price.toFixed(2)}}</td>--> <!--<td>{{getFinalPrice(book.price)}}</td>--> <td>{{book.price | showPrice}}</td> <td><button @click="decrement(index)" :disabled="book.count <= 0">-</button> {{book.count}} <button @click="increment(index)">+</button></td> <td><button @click="removeClick(index)">移除</button></td> </tr> </tbody> </table> <div>总价格:{{totalPrice | showPrice}}</div> <!--<button disabled>++++</button>--> </div> <h2 v-else>购物车为空</h2> </div> <script src="../js/vue.js"></script> <script src="index.js"></script> </body> </html>
index.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; text-align: center; }
index.js
const book = new Vue({ el: '#app', data: { books: [ { id: 1, name: '《算法导论》', data: '2006-9', price: 120.00, count:1 }, { id: 2, name: '《Linux编程艺术》', data: '2006-10', price: 85.00, count:1 }, { id: 3, name: '《Python异步编程》', data: '2006-11', price: 59.00, count:1 }, { id: 4, name: '《现在操作系统》', data: '2006-12', price: 39.00, count:1 }, ] }, computed:{ totalPrice(){ // let totalPrice = 0; // for(let i=0; i<this.books.length; i++){ // totalPrice += this.books[i].price * this.books[i].count // } // return totalPrice return this.books.reduce(function (preValue, book) { return preValue + book.price * book.count }, 0) } }, methods: { getFinalPrice(price){ return '¥' + price.toFixed(2) }, increment(index){ this.books[index].count++ }, decrement(index){ this.books[index].count-- }, removeClick(index) { this.books.splice(index, 1) } }, filters: { showPrice(price){ return '¥' + price.toFixed(2) } } });
最终效果图
原文地址:https://www.cnblogs.com/Alexephor/p/11734308.html
- lncRNA实战项目-第四步-得到表达矩阵的流程
- 一次切割日志引发的血案
- lncRNA实战项目-第三步-了解参考基因组及注释文件
- 如何通过iframe调用其他页面的内容
- WCF 学习总结1 -- 简单实例
- Java8 + Tomcat8 实现Websocket 例子
- Python Syslog Server 开发实例
- WCF 学习总结2 -- 配置WCF
- SQLite事务 SQLite插入多条语句为什么这么慢?.net (C#)
- Linux 应用程序开发入门
- LINQ to XML LINQ学习第一篇
- PHP 安全与性能
- Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
- WPF备忘录(5)怎样修改模板中的控件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- sql serve2008是否自带互斥锁
- Flutter基础widgets教程-CupertinoSwitch篇
- Flutter基础widgets教程-CupertinoTabScaffold篇
- C++11 move 语义
- 论函数的设计应如何才好,返回临时变量 | 返回引用 | 传递引用
- Flutter基础widgets教程-CupertinoTabView篇
- 关于time的使用
- class priority_queue<> 简单介绍
- C++ share_prt 简单设计和实现
- 使用函数对象与使用函数的比较
- C++ 函数指针的定义方法及使用
- C++ 线程池的简易实现
- Flutter基础widgets教程-DataTable篇
- 2015-C++研发附加题第一题
- win7 64位 下,进程可申请的堆空间