Vue实现小购物车功能
更新时间：2020年12月21日 11:30:50 作者：.你别皱眉
这篇文章主要为大家详细介绍了Vue实现小购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现小购物车功能的具体代码，供大家参考，具体内容如下
本人还在初级学习阶段，有很多不足之处，希望能指出错误，一起进步
HTML代码块
<body>
<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="(itme,index) in books">
<td>{{itme.id}}</td>
<td>{{itme.name}}</td>
<td>{{itme.date}}</td>
<!-- showPrice过滤器 -->
<td>{{itme.price | showPrice}}</td>
<td>
<!-- 动态绑定disabled，当数量小于1时 禁止点击按钮-->
<button @click="decrement(index)" :disabled="itme.count <= 1">-</button>
{{itme.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="Handle(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格：{{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
</body>
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: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
Vue.js代码块
const app = new Vue({
el:'#app',
data:{
books:[
{
id:1,
name:'《算法议论》',
date:'2001-1',
price:85.00,
count:1
},
{
id:2,
name:'《编程珠玑》',
date:'2002-1',
price:65.00,
count:1
},
{
id:3,
name:'《Unix编程艺术》',
date:'2000-1',
price:59.00,
count:1
},
{
id:4,
name:'《代码大全》',
date:'2005-1',
price:135.00,
count:1
},
]
},
/**
* 使用普通方法
*/
methods:{
//获取小数点的方法
// getFinalPrice(price){
// return '￥' + price.toFixed(2);
// }
//点击事件
increment(index){
this.books[index].count++;
},
decrement(index){
this.books[index].count--;
},
Handle(index){
this.books.splice(index,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;
}
},
/**
* 使用过滤器获取小数点
*/
filters:{
showPrice(price){
return '￥' + price.toFixed(2);
}
}
})
效果如图：
还有很多不足之处，希望大家能指出。
关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了项目nginx部署到非根目录下vue配置方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
本文主要介绍了Vue3 JSX解释器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了Vue v-text指令简单使用方法,结合实例形式分析了v-text指令文本输出显示简单操作技巧,需要的朋友可以参考下2019-09-09
在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理2022-10-10
这篇文章主要介绍了vue前端如何接收后端传过来的带list集合的数据,前后端交互,文中的示例Json报文,前端采用vue进行接收,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了vue跨域解决方法 ,需要的朋友可以参考下2017-10-10
今天小编就为大家分享一篇关于Vue核心概念Action的总结，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要为大家详细介绍了vue实现web滚动条分页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本篇文章主要介绍了详解基于webpack和vue.js搭建开发环境 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本篇文章主要介绍了Vue.directive自定义指令的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
最新评论