Vue-购物车简单案例

效果图：

代码部分：

index.html

<div id="app"><div v-if="books.length"><table><thead><tr><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in books"><td>{{item.id}}</td><td>{{item.bookName}}</td><td>{{item.date}}</td><td>{{item.price | showPrice}}</td><td><button @click="decrement(index)" :disabled="item.count<=1">-</button>{{item.count}}<button @click="increment(index)">+</button></td><td><button @click="removeClick(index)">移除</button></td></tr></tbody></table><h2>总价格:{{getTotalPrice | showPrice}}</h2></div><div v-else><h2>购物车为空</h2></div>
</div>
<script src="../js/vue.js"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>

main.js

const app = new Vue({el: '#app',data: {books: [{id: 1,bookName: '《算法导论》',date: '2006-9',price: 85.00,count: 1}, {id: 2,bookName: '《UNIX编程艺术》',date: '2006-2',price: 59.00,count: 1}, {id: 3,bookName: '《编程珠玑》',date: '2008-10',price: 39.00,count: 1}, {id: 4,bookName: '《代码大全》',date: '2006-3',price: 128.00,count: 1},]},computed: {getTotalPrice() {// let result = 0;// for(let i = 0;i<this.books.length;i++){//   result += this.books[i].count*this.books[i].price// }// return  result;return this.books.reduce((a,b)=>a+b.price*b.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)}}
})

style.css

#app table {text-align: center;width: 500px;
}

Vue-购物车简单案例相关推荐

VUE购物车小案例—vue指令的综合应用
需求: 运用Vue基础指令知识实现小小购物车: 涉及到的指令有:v-for.v-model .v-on.v-text 1.能够显示商品名,价格,以及当前商品在购物车的数量 2. 点击加+ 减- 可 ...
简单的VUE购物车应用
简单的VUE购物车应用这个项目主要运用了Vue的双向数据绑定,是一个很基础的小项目文章目录简单的VUE购物车应用前言一.项目实例二.实现步骤 1.简单布局 2.数据操作总结前言 v-m ...
vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
vue实现购物车简单的功能-单选全选总价计算、批量删除
vue实现购物车简单的功能-----单选全选总价计算.批量删除等观看了后盾人视频教学,视频里面对于全选和单选的功能没有讲全,于是自己研究了一下,前端小白,也是第一次写博客,有什么不足和可以优化的地方 ...
VUE:学生列表案例——内部指令v-for与v-on简单应用
#本案例需要熟悉v-for与v-on这两个vue内部指令,下面通过两个简单的案例,带领大家迅速熟悉一下这两个常用的内部指令 v-for指令:主要用于列表的渲染与循环数组简单案例: 关键代码部分: & ...
vue下使用fullcalendar及简单案例
ps:我真的感觉自己是个前端了,最近天天在写前端.不过很多复杂逻辑,后台处理起来比较麻烦,所以只让后台提供简单数据,前端封装处理数据确实比较方便! 引子:最近公司要做个人日程管理,故鄙人思前想后,选择 ...
Vue实现计算商品总价简单案例
计算商品总价简单案例-Vue 练习vue的指令和计算属性的一个小案例. 主要效果: 数量增加和减少,小于1不可操作删除操作任何加.减.删除操作都会更新总价商品全删除后显示提示代码: <b ...
vue+element简单实现商城网站首页，模仿电商商城
1.安装启动vue项目可参考 vue+element简单实现商城网站首页,模仿小米电商商城https://blog.csdn.net/lucky_fang/article/details/121544 ...
电子表格分析简单案例
数据分析学习系列-电子表格分析简单案例案例1:成绩单学员人数分析案例2:商品购买渠道表分析案例3:成绩单单表筛选以及突出显示前言写在前面:电子表格在我们的日常学习和工作中应用越来越广泛,除去 ...
用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...

Vue-购物车简单案例

效果图：

代码部分：

Vue-购物车简单案例相关推荐

最新文章

热门文章