网站建设的题目,江门市建设工程安全监督网站,wordpress转载微博,聊城企业做网站购物车实现过程#xff1a; Ⅰ、商品购物车作业需求#xff1a;1、商品购物车页面示例#xff1a;2、具体需求#xff1a; Ⅱ、html 文件的构建#xff1a;商品购物车.html Ⅲ、组件文件的构建#xff1a;商品购物车1.js Ⅳ、小结#xff1a; Ⅰ、商品购物车作业需求 Ⅰ、商品购物车作业需求1、商品购物车页面示例2、具体需求 Ⅱ、html 文件的构建商品购物车.html Ⅲ、组件文件的构建商品购物车1.js Ⅳ、小结 Ⅰ、商品购物车作业需求
1、商品购物车页面示例 2、具体需求 其一、至少包含两款商品每款商品有不同的单价、起购数量和加减数量其二、组件需提取为单独的JavaScript文件其三、除了上述要求外开发人员可以根据自己对“商品购物车”的理解自由发挥增加其他功能
Ⅱ、html 文件的构建
商品购物车.html
其一、项目的构建方式 其二、代码为 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcvue.js/scriptscript src商品购物车1.js/scriptstyle/* 容器 flex布局横向左边开始纵向剧中总共5个 */.v1 {/* 使用flex布局 */display: flex; /* v1容器横向排列 */flex-direction: row;/* 主轴靠左,从左边开始 */justify-content: flex-start;/* 纵轴 剧中 */align-items: center;}.myImg {width: 100px;height: 100px;}/style/headbodydiv idapph3商品购物车/h3div classv1 v-for(item, index) in goodsdivimg classmyImg :srcitem.goodsImg//divdiv stylemargin-left: 20px;p商品名称:{{item.goodsName}}/pp商品介绍:{{item.goodsDes}}/p/divdiv stylemargin-left: 20px;!-- 使用过滤器对价格进行字符转换-格式化 50.00 --单价: {{item.goodsPrice | moneyFilter}}/divdiv stylemargin-left: 20px;!-- 父组件使用事件名称 来接收子组件传递过来的事件 --shop-counter mycountupdateCount :indindex :qigouitem.goodsQigou :shuliangitem.goodsAmount/shop-counter/divdiv stylemargin-left: 20px;!-- {{}}从data中的变量读取并显示 --总金额: {{item.goodsPrice * item.goodsAmountNow | moneyFilter}}/div/div /divscriptvar vm new Vue({el: #app,data: {goods: [ //装商品对象每个商品有图像、名称、介绍、单价、起购数量、加减数量、总金额单价*数量{goodsImg: https://img.mp.sohu.com/upload/20170525/9a27d60cbc854536aa26c690c97cf2c0_th.png,goodsName: 北京烤鸭,goodsDes: 便宜不拉肚子,goodsPrice: 5000, //数据库存储金额都是以币种最小单位存储 方便计算不会丢失精度goodsQigou: 5,goodsAmount: 2,goodsAmountNow: 5}, {goodsImg: https://img.zcool.cn/community/01dd8c6051cb0511013e87f451cc96.jpg1280w_1l_2o_100sh.jpg,goodsName: Dior口红,goodsDes: 好用又好看,goodsPrice: 25012,goodsQigou: 1,goodsAmount: 1,goodsAmountNow: 1}]},methods: {updateCount(e, i) {//e中包含了商品数量econsole.log(商品数量 e 商品下标: i)//拿到了商品数量之后我们要更新goods数组里面对应商品的goodsAmountNow值//数组想要识别其中到底是哪一个元素-下标索引this.goods[i].goodsAmountNow e}},filters: {moneyFilter(e) {//对传递过来的价格进行转换价格通过e来传递和接收// toFixed() JavaScript函数可以对数字取n位小数 对数字调用toFixed()return (e / 100).toFixed(2)}}})/script/body
/html
其三、展示页面为 Ⅲ、组件文件的构建
商品购物车1.js
其一、代码为 //商品计数器的组件代码Vue.component(shop-counter, {data: function() {return {count: parseInt(this.qigou), //商品数量,amount: parseInt(this.shuliang),subBtn: true,addBtn: false}},props: [qigou, shuliang, ind], //通过props接受父组件传递过来的数据// 1 颜色高亮 2 自动补全 3 不能换行// template: button/button, //组件的HTML代码 两个按钮一个输入框// 反引号写代码 缺点1 颜色高亮 2 自动补全 但是可以换行template: div!-- 商品计数器总共3个组件 -号按钮 输入框 号按钮 --button clicksub :disabledsubBtn-/buttoninput v-model.numbercount stylewidth: 20px;text-align: center; keydown.upadd v-on:keydown.downsub/button clickadd :disabledaddBtn/button/div,methods: {sub() {// 最少1个,最多9个if (this.count this.qigou) {// 如果1,就给减this.count this.count - this.amount //商品数量 -1}if (this.count this.qigou) {this.subBtn true //如果商品小于1禁用-号按钮}if (this.count 99) {this.addBtn false //如果商品小于9启用号按钮}//发射 子组件向父组件发射事件携带商品数量过去this.$emit(mycount, this.count, this.ind)},add() {// 增加商品数量// 最少1个,最多9个if (this.count 99) {this.count this.count this.amount //商品数量1}if (this.count this.qigou) {this.subBtn false //如果商品大于1启用-号按钮}if (this.count 99) {this.addBtn true //如果商品数量大于9禁用号按钮}this.$emit(mycount, this.count, this.ind)}},watch: {count() {if (this.count this.qigou || this.count 99 || isNaN(parseInt(this.count))) {this.count this.qigou}}}
})
Ⅳ、小结
其一、哪里有不对或不合适的地方还请大佬们多多指点和交流 其二、若有转发或引用本文章内容请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易且行且珍惜 其三、有兴趣的话可以多多关注这个专栏(Vue(Vue2Vue3)面试必备专栏)(直接点击下面 url 跳转)https://blog.csdn.net/weixin_43405300/category_11525646.html?spm1001.2014.3001.5482
