vue购物车案例实训报告,vue.js购物车案例
本文主要分享一个关于Vue购物车箱的小练习。文章的标题是悲惨的购物车。整个过程需要用HTML代码来实现。有需要的朋友可以参考文章具体内容。
:
目录
1.购物车箱2。代码实现3。摘要
1.购物车案例
经过一系列的学习，我们在这里练习一个购物车案例。
需求：用vue写一个表单页面，页面上有购买的数量。点击按钮或-，可以增加或减少购物车数量，数量必须至少为0。单击删除按钮，产品将被删除。移除所有产品后，页面上的表单会消失。
然后出现文字：购物车是空的。表格底部是商品总价，随着商品数量的增加而增加。默认值为0元。
总体效果如下：
2.代码实现
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
脚本src=./js/vue.js/script
风格
表格{
边框：1px实心# e9e9e9
边框-塌陷：塌陷；
边框间距：0；
}
th，td{
填充：8px 16px
边框：1px实心# e9e9e9
文本对齐：左对齐；
}
th{
背景色：# f7f7f7
颜色：# 5c6b77
字体粗细：600；
}
/风格
/头
身体
div id=应用程序
div v-if=books.length
桌子
线
tr
th/th
第本书名称/第
出版日期/日
Th价格/th
Th采购数量/th
Th操作/th
/tr
/线程
在需要分行下载处加上
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
任务描述
button @click=减少(索引):disabled= book . count=0 -/button
{{book.count}}
button @click=增加(指数)/button
/td
任务描述
button @ click= remove click(index)删除/按钮
/td
/tr
/tbody
/表格
p总价：{{totalPrice showPrice}}/p
/div
H2 v-else购物车为空/h2
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
书籍：[
{ 名称:算法简介，发布日期: 2006年9月，价格:20.00，计数:0}，
{name:UNIX编程艺术， publish _ date : 2006年2月， price: 30.00， count: 0}，
{ 名称:编程技术，发布日期: 2008年10月，价格:40.00，计数:0}，
{name: Codebook ， publish _ date: March 2006 ， price: 50.00， count: 0}，
],
},
方法：{
//添加
减少(指数){
this . books[索引]。计数-=1
},
//减少-
增加(指数){
this . books[索引]。计数=1
},
//移除按钮
removeClick(index){
this.books.splice(索引，1)
}
},
计算值：{
//计算总价
总价(){
让totalPrice=0
对于(本书的第一项){
总价=item.price * item.count
}
退货总价
}
},
//Filter，将价格过滤到小数点后2位。
过滤器：{
showPrice(价格){
返回price . to fixed(2)
}
}
})
/脚本
/body
/html
3.总结
v-for：周期，周期账本列表v-on：事件监控，监控点击事件disabled：按钮是否可以点击，如果为真则可以点击，如果为假则不能点击，增加了判断条件：disabled=book.count=0 。当购物车数量0时，不能点击v-if和v-else：条件判断。判断书单的长度。如果有一个长度来显示列表，如果长度为0，则显示文本购物车为空。filters：自定义过滤器，过滤价格，过滤后用computed：的2位小数计算购物总价。
这就是这篇关于Vue购物车案例练习的文章。更多相关的Vue购物车练习内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。