Vue 购物车案例练习
更新时间：2021年10月27日 08:42:05 作者：Silent丿丶黑羽
这篇文章主要给大家分享关于Vue 购物车案例的小练习，文章个悲剧购物车为标题需求利用HTML代码实现整个过程,需要的朋友可以参考一下文章的具体内容
1.购物车案例
经过一系列的学习，我们这里来练习一个购物车的案例
需求：使用
vue写一个表单页面，页面上有购买的数量，点击按钮+或者-，可以增加或减少购物车的数量，数量最少不得少于0，点击移除按钮，会移除该商品，当把所有的商品移除后，页面上的表单消失，然后出现文字：购物车为空，表单下方是商品的总价格，随着商品的数量增加而增加，默认是0元，
总体效果如下：
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<style>
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;
}
</style>
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thread>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thread>
<tbody>
<tr v-for="(book, index) in books" :key="book">
<td>{{index+1}}</td>
<td>{{book.name}}</td>
<td>{{book.publish_date}}</td>
<td>{{book.price | showPrice}}</td>
<td>
<button @click="decrease(index)" :disabled="book.count <= 0">-</button>
{{book.count}}
<button @click="increase(index)">+</button>
</td>
<td>
<button @click="removeClick(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<p>总价：{{totalPrice | showPrice}}</p>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
books: [
{"name":"算法导论", "publish_date":"2006-9", "price":20.00, "count": 0},
{"name":"UNIX编程艺术", "publish_date":"2006-2", "price":30.00, "count": 0},
{"name":"编程技术", "publish_date":"2008-10", "price":40.00, "count": 0},
{"name":"代码大全", "publish_date":"2006-3", "price":50.00, "count": 0},
],
},
methods: {
// 增加+
decrease(index){
this.books[index].count-=1
},
// 减少-
increase(index){
this.books[index].count+=1
},
// 移除按钮
removeClick(index){
this.books.splice(index, 1)
}
},
computed: {
// 计算总价格
totalPrice(){
let totalPrice = 0
for (let item of this.books){
totalPrice += item.price * item.count
}
return totalPrice
}
},
// 过滤器，将价格过滤成有2位小数的
filters: {
showPrice(price){
return '￥' + price.toFixed(2)
}
}
})
</script>
</body>
</html>
3.总结
v-for：循环，循环books列表
v-on：事件监听，监听点击事件
disabled：按钮是否可以点击的属性，为True可点击，为False不可点击，增加判断条件:disabled="book.count <= 0"当购物车数量≤0，则无法点击
v-if和v-else：条件判断，判断books的列表长度，如果有长度展示列表，如果长度为0则展示文字购物车为空
filters：自定义过滤器，过滤价格，使本身的价格过滤后带有2位小数
computed：计算属性，计算购物的总价格
到此这篇关于Vue 购物车案例练习的文章就介绍到这了,更多相关Vue 购物车练习内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
AES算法是一种对称加密算法,用于加密和解密数据,下面这篇文章主要给大家介绍了关于Vue项目中实现AES加密解密的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
大家应该都知道vue是单向数据流，一般我们也不会在子组件里面修改父组件传进来的值，但总有需要修改的时候，这篇文章主要介绍了vue中修改props传进来的值,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于Swiper在Vue2中的简单使用方法,swiper是一款现代化的移动端轮播组件,可以在Vue中轻松使用,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了详解Vue.js 可拖放文本框组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要为大家详细介绍了基于Vue实现手势签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了Vue如何提升首屏加载速度实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了深入理解vue中的$set,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
下面小编就为大家分享一篇使用watch监听路由变化和watch监听对象的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue3中使用Pinia修改State的五种方式,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
在Vue 3 Composition API中,我们可以使用自定义钩子函数来封装可复用的逻辑,useAsyncState是一个用于管理异步状态的自定义钩子函数,本文将给大家介绍一下useAsyncState的实现原理,感兴趣的朋友可以参考下2024-01-01
最新评论