如何做棋牌网站,dedecms购物网站,网站开发需要那些人才,icp备案号是什么意思1.实现购物车页面
在页面中显示购物车中的商品信息#xff0c;并能进行数量增减及商品删除操作#xff0c;购物车中金额也随商品数量的变化而变化
2.创建cart.html页面
创建cart.html页面#xff0c;在其中创建Vue实例#xff0c;实例中首先准备一些商品信息以供显示并能进行数量增减及商品删除操作购物车中金额也随商品数量的变化而变化
2.创建cart.html页面
创建cart.html页面在其中创建Vue实例实例中首先准备一些商品信息以供显示在组件实例data选项中编写商品信息
!DOCTYPE html
htmlheadmeta charsetutf-8title购物车/titlescript srcjs/vue2.js/script/headbody div idapp/divscriptvar app new Vue({el:#app,data:{shangpins:[{id:1,name:万岁山,danjia:80,num:3},{id:2,name:清明上河园,danjia:120,num:5},{id:3,name:龙庭公园,danjia:40,num:5}]}})/script/body
/html3.计算单项价格
为了使单项商品金额随购物车中商品数量动态变化需要在Vue实例中编写方法shangpinJiage()来进行计算并在方法中编写deleteShangpin()用以删除购物车中的商品。购物车中商品总价的统计使用计算属性来实现。在cart.html的Vue实例中添加以下代码。 methods:{//单项商品价格shangpinJiage(danjia,num){return danjia * num;},deleteShangpin(index){this.shangpins.splice(index,1);}},computed:{zongJia(){var zongjia 0;this.shangpins.forEach(function(sp,index,arr){zongjia sp.danjia * sp.num;})}}4.在div容器中遍历展示
在id app的div中使用v-for标签遍历输出商品信息单项书籍价格使用shangpinJiage()方法进行更新总价计算使用计算属性zongJia()进行更新删除功能使用v-on指令通过监听按钮点击deleteShangpin()方法实现在cart.html的vue实例中添加如下代码
div idapptable border1trth序号/thth商品名称/thth单价/thth数量/thth金额/thth操作/th/trtr v-for(shangpin,index) in shangpins :keyshangpin.idtd{{shangpin.id}}/tdtd{{shangpin.name}}/tdtd{{shangpin.danjia}}/tdtdbutton v-bind:disabledshangpin.num 0v-on:clickshangpin.num-1-/button{{shangpin.num}}button v-on:clickshangpin.num1/button/tdtd{{shangpinJiage(shangpin.danjia,shangpin.num)}}/tdtdbutton clickdeleteShangpin(index)删除/button/td/tr/tablespan总价{{zongJia()}}/span/div5.在页面中添加style样式
stylebody{width: 600px;}table{border:1px solid black;}table{width: 100%;}th{height: 50px;}th,td{border-bottom: 1px solid #ddd;text-align: center;}span{float:right}/style6.运行项目即可看到如下的结果
