Vue实现本地购物车功能

本文实例为大家分享了某视频剪辑软件实现本地购物车功能的具体代码，供大家参考，具体内容如下

功能分析： v-for显示商品名字，价格，数量和对商品进行操作，全选的功能结构仍然分成index.html :号，索引。js，样式。钢性铸铁

index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题购物车实例/title link rel='样式表href=' style。CSS '/头体div id=' app ' v-斗篷模板v-if='list.length '表格和tr thin put type=“checkbox ”@单击=' checkAll ' :选中=' all check '/th序号/th商品名称/th商品单价/th购买数量/th操作/th/tr/the ad t body tr-v for='列表中的（项目，索引)t输入类型=' checkbox ' :选中=' item。ischecked ' @ click='单次检查(索引)'/TD TD { { index 1 } }/TD { { item。名称} }/TD TD { { item }。价格} }/TD TD按钮@ click=' handleReduce(索引)“: disable=”项。count====1 '-/button { { item。计数} .移除/button /td /tr /tbody /table div总价： { { TotalPrice } }/div/template div v-else购物车为空/div /div/body！-通过内容交付网络引入-脚本src=' http :https://cdn。jsdeliver。net/NPM/vue/dist/vue。js '/script script src=' http :索引。js '/脚本/html索引。射流研究…

const app=new Vue({ el : '#app '，数据： { allCheck:false，list : [ { id: 1，name :'iPhone 8 '，price: 6188，count: 1，isChecked : false }，{ id: 2，name : '小米8 ',价格： 5888,计数： 1，isChecked : false }，{ id: 3，名称：'iPad Pro '，价格： 11000,计数： 1，isChecked : false }，{ id: 4，名称： '雷神SE9 '，价格： 6188,计数： 10，isChecked : false }，] }，计算： { //通过计算属性获取总价格total price : function(){ 0让total=0；const NewArr=这个。名单。筛选器(值={返回值。ischecked==true })为(var I=0；inewarr . lengthi){ total=this . list[I].价格*这个。清单[i].计数} //返回一个符合千分位格式的金额数//返回total.toString().替换(/\B(？=(\d{3}) $)/g，'，')返回总计} }，方法： { //减法handlereduce :函数(索引){ if(this。列表[索引]).计数===1)返回；这个。列表[索引]。计数-;}, //加法handleadd :函数(索引){ this。列表[索引].计数},//移除handleremove :函数(索引){ this。名单。拼接(索引，1) }，//全选checkAll() { this.allCheck=！这个。全部检查这个。名单。foreach(值={ value。ischecked=这个。all check })}，//单选，当全部选中时，改变全选按钮的状态single CheCk(index){ this。列表[索引].isChecked=！列表[索引]。isChecked const select data=this。名单。筛选器(值={返回值。isChecked==true })这一点。全部检查=选择数据。长度===这个。名单。长度？true : false } }})style.css

[v-斗篷]{ display : none；}表格{边框： 1px实心# e9e 9；边界崩溃：崩溃；边框间距： 0;空细胞：显示；}th，TD { padd : 8px 16pxborder : 1px实心# e9e9e9文本-左对齐：}th { background:黄绿色；颜色： # 5c 6b 77字体粗细： 600；空白： nowrap}效果图如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。