vue.js购物车案例,vuex购物车案例
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单购物车的具体代码，供大家参考，具体内容如下
代码：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题文档/标题
/头
身体
div id=应用程序
桌子
四羟乙基己二酰胺
tr
th/th
泰国(泰国)书籍名称/th
泰国(泰国)出版日期/th
泰国(泰国)价格/th
泰国(泰国)购买数量/th
泰国(泰国)操作/th
/tr
/thead
在需要分行下载处加上
tr v-for=(item，index) in books :key=item
td{{item.id}}/td
td{{item.name}}/td
td{{item.date}}/td
TD { { item。价格*项目。count 获取最终价格} }/TD
任务描述
按钮@ click= reduce(index):disabled= item。count=1 -/按钮
{{item.count}}
按钮@click=添加（索引)/按钮
/td
任务描述
button @click=removeBtn(index)移除/按钮
/td
/tr
/tbody
/表格
h2 v-if=书籍！=总价格：{{theSumOf getFinalPrice}}/h2
h2 v-else购物车为空/h2
/div
/body
脚本src=./js/vue.min.js/script
脚本
var应用=新Vue({
埃尔： #app ，
数据：{
书籍：[
{
id: 1，
名称： 计算机应用，
日期："2006年9月",
价格：85.00,
计数：1
},
{
id: 2，
名称： java应用，
日期："2006年9月",
价格：10.00,
计数：1
},
{
id: 3，
名称： 大数据，
日期："2006年9月",
价格：85.00,
计数：1
},
{
id: 4，
名称：用户界面设计师，
日期："2006年9月",
价格：85.00,
计数：1
},
],
加数：0
},
方法：{
添加（索引){
这个。书籍[索引]。数数
},
减少（索引){
这个。书籍[索引]。数数-
},
removeBtn(index) {
this.books.splice(索引，1)
}
},
组件：{
},
计算值：{
thesumf:function(){
//累加计算的第一种方法
//让总和=0
//this.books.forEach(item={
//sum=parse int(item。price)* parse int(item。计数)
});
//返回总和
//累加计算的第二种方式
//让总和=0
//for(让我在这本书中){
//sum=this.books[i].价格*这个。书籍[I]*计数
}
//返回总和
//累加计算的第三种方式
//让总和=0
//for(let item of this.books){
//sum=item.price*item.count
//}
//返回总和
//累加计算的第四种方法
归还这个。书籍。减少(功能(前值，账面){
返回preValue book.price*book.count
},0)
}
},
过滤器：{
getFinalPrice(price) {
返回价格。到固定(2)
},
}
});
/脚本
超文本标记语言
关于vue。j的学习教程，请大家点击专题vue。j组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。