Vuejs实现购物车功能

开始更新前端框架Vue .射流研究…的相关博客。

功能概述

学习了Vue .射流研究…的一些基础知识，现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下： (1)展示商品的名称、单价和数量；(2)商品的数量可以增加和减少；(3)购物车的总价要实时更新，即数量发生变动，总价也要相应的改变；(4)商品可以从购物车中移除；(5)具有选择功能，只计算选中的商品的总价。

上一张截图，如下：

代码

代码分成三部分，分别是HTML、JS、CSS。关键的是超文本标记语言和JS。

超文本标记语言

！DOCTYPE html html head meta charset=' utf-8 ' title vue购物车/title脚本src='http:/js/vue。量滴js /脚本链接href='./CSS/购物车。CSS“rel=”外部no跟随“rel=”样式表/head body div id=' app ' v-斗篷模板v-if='list.length '表和tr thin put type=' checkbox ' v-: click=' swapccheck ' v-model=' checked '/th商品名称/th商品单价/th商品数量/th操作/th/tr/ad t主体tr-v-for='(项目，索引)在列表中t输入类型=' checkbox ' v-model=' SelectList ' : id=' item。id ' : value=' index ' name=' selectList '/TD TD { { item }。名称} }/TD TD { { item }。价格} }/TD TD按钮@ click=' handleReduce(index)' : disabled=' item。count====1 '-/button { { item .移除/button/td /tr /tbody /table div总价：{ { TotalPrice } }/div/template div v-else购物车为空！/div /div脚本src='http:/js/cart。js '/脚本/正文/HTMljs

var app=new Vue({ el:'#app '，data:{ list:[ { id:1，name:'iPhone 8 '，price:8888，count:1 }，{ id:2，name: ' Huwei Mate10 '，price:666，count 3:1 }，{ id:3，name 3333366选择列表。长度；我透镜；I){ var指数=这个。选择列表[I]；var项目=这个。列表[索引]；if(item){ total=item。价格*项目。计数；} else{继续；} }返回total.toString().替换(/\B(？=(\d{3}) $)/g，'，')；} }，方法： { handlereduce :函数(index){ var item=this。列表[索引]；if(项目。计数2){ return；}项。计数-；}，HandleAdd: FuncTion(index){ var item=this。列表[索引]；item.count}，handleremove :函数(索引){ this。名单。拼接(索引，1)；}，swap check : function(){ var select list=document。getelementsbyname(' SelectList ')；var len=SelectList . length if(this。选中){ for(var I=0；我透镜；I){ var item=select list[I]；item . checked=false } this . checked=false this。select list=[]；} else { for(I=0；我透镜；I){ item=select list[I]；if(项目。选中===false){ item。选中=真；this.selectList.push(选择列表[i]).值);} } this . checked=true } } } })；半铸钢钢性铸铁(铸造半钢)

[v-斗篷]{ display : none；}表格{ border: 1px纯黑；边界崩溃：崩溃；边框间距： 0;空细胞：显示；}th，TD { padd : 8px 16pxborder :1 px纯黑；文本对齐：中心；}th{底色-颜色：灰色；}关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

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