网站建设网络推广,深圳办公室装修效果图,网站后台设计培训学校,晋城住房保障和城乡建设管网站前言#xff1a; 首先我们要明白整个购物车的组成。它是由一个主页面加两个组件组合成的。本章主要运用父子之间的通讯#xff1a; 父传子 子传父 首先新建一个vue3项目#xff0c;这里有俩种创建方式#xff1a;
vue-cli #xff1a; ● 输入安装指令 npm init vuelates…前言 首先我们要明白整个购物车的组成。它是由一个主页面加两个组件组合成的。本章主要运用父子之间的通讯 父传子 子传父 首先新建一个vue3项目这里有俩种创建方式
vue-cli ● 输入安装指令 npm init vuelatest 等待几秒之后 输入你要创建的文件名进入下一步 cd 文件名 安装项目依赖npm install 打开文件 npm run dev 如果需要发布生产环境 npm run build vite 使用 vite 体验更快速 $ npm init vite-app $ cd $ npm install $ npm run dev #yarn $ yarn create vite-app $ cd $ yarn $ yarn dev 打开app.vue 也就是 主页面
script
import Product from /components/Product.vue
import Collecrs from /components/Collecrs.vue
export default {name: app,// 注册一下俩个组件components: { Product, Collecrs },data: () ({// 购物车本地数据shopCar: [{id: 89,title: 四川爱媛38号果冻橙 当季时令应季彩箱装甜桔橘子新鲜水果专区 净重2斤小果尝鲜装(力荐大果口感更好更实惠),subtitle: 由初逐旗舰店从 四川眉山市 发货, 并提供售后服务. 现在至明日17:00前完成下单预计11月15日19:30前发货,image: https://img12.360buyimg.com/n1/jfs/t1/39198/22/19565/188868/634a3bc4Ea15f2eee/2bb232b36cdd285c.jpg,price: 10,count: 1,selected: false},{id: 102,title: 【现货速发】新鲜四季青柠檬 无籽香水柠檬当季生鲜小青柠檬奶茶店水果 有籽青柠檬1斤装试吃【50-80克】,subtitle: 由朵艾美水果旗舰店发货, 并提供售后服务. 现在至明日16:00前完成下单预计11月16日23:30前发货,image: https://img12.360buyimg.com/n1/jfs/t1/191077/5/6346/108268/60beea0dEc3a6d2ad/15db7dd619a0bc4f.jpg,price: 9,count: 3,selected: false},{id: 108,title: 新疆阿克苏冰糖心苹果 新鲜时令水果 阿克苏苹果红富士 10斤礼盒装 单果75-85mm 净重9斤多,subtitle: 由阿克苏苹果旗舰店发货, 并提供售后服务. 现在至明日16:00前完成下单预计11月16日20:30前发货,image: https://img13.360buyimg.com/n1/jfs/t1/64647/33/22918/106322/6360afb1E9bab1003/a82bda0aeae6e953.png,price: 80,count: 2,selected: false},]}),methods: {// 单选danxuan(checked, id) {// 循环购物车中的每个产品this.shopCar.some(product {// 判断更改的是哪一个产品的 checked 状态if (id product.id) {product.selected checked // 改变购物车中指定产品的选中的值return true // 结束循环}})},// 修改购物车数量changeProductCount(count, id) {this.shopCar.some(product {// 判断更改的是哪一个产品的 checked 状态// console.log(id是id)// console.log(product.id是product.id)if (id product.id) {product.count count // 改变购物车中指定产品的选中的值return true // 结束循环}})},// 全选quanxuans(checked) {// 改变购物车所有产品的选中状态this.shopCar.forEach(product product.selected checked)}},computed: {// 是否全选购物车产品 every所有都变他才变isFullSelecteProduct() {return this.shopCar.every(product product.selected)},// 总金额total() {return this.shopCar.filter(item item.selected) // 过滤掉被选中得产品.reduce((money, item) (money item.price * item.count), 0) // 累加器},// 购买总数量countSum() {return this.shopCar.filter(item item.selected) // 过滤掉被选中得产品.reduce((count, item) (count item.count), 0) // 累加器}}
}
/scripttemplatediv classapp!-- 产品展示,把数据 遍历一下 拿到每一列的数据 再把数据 父传子 Product接收一下然后渲染--Product v-forproduct in shopCar :keyproduct.id :idproduct.id :pictureproduct.image:titleproduct.title :subtitleproduct.subtitle :priceproduct.price :countproduct.count:is-checkedproduct.selected change-product-checkeddanxuanchange-product-countchangeProductCount/Product!-- 控制器 --Collecrs :is-all-checkedisFullSelecteProduct :all-moneytotal :all-countcountSumchange-all-checked-statequanxuans/Collecrs/div
/template
style
* {margin: 0;padding: 0;/* text-align: center; */
}
/style
创建组件 Product.vue 它是购物车显示的内容
script
export default {//接收一下父组件传来的数据props: {id: { type: Number, required: true }, // 产品编号isChecked: Boolean, // 是否被选中picture: { type: String, required: true }, // 图像title: { type: String, required: true }, // 标题subtitle: { type: String, required: true }, // 副标题price: { type: Number, defalut: 0 }, // 单价count: { type: Number, defalut: 0 } // 数量 },// 声明 自定义事件emits: [changeProductChecked,//改变复选框changeProductCount //改变产品数量],methods:{changeCheckedState(e){let newCheckedState e.target.checked // 复选框最新的状态this.$emit(changeProductChecked, newCheckedState, this.$props.id) // 触发自定义的事件并传值给父组件}}
}
/script
templatediv classbox//正常渲染数据之后再进行其他操作!-- 选项图 用 :checkedisChecked 的方法来用接收过来的数据进行渲染--input typecheckbox classp_checkbox :checkedisChecked changechangeCheckedState!-- 产品图 --img classp-image :srcpicture!-- 产品内容 --div classp_content!-- 标题 --h3 classp_title v-texttitle/h3!-- 副标题 --span classp_subtitle v-textsubtitle/span!-- 价格 --h2 classp_price${{ price }}/h2!-- 数量区域 --div classp_count_area//button :disabledcount1 click$emit(changeProductCount, -1, id)-/buttonspan v-textcount/spanbutton click$emit(changeProductCount, 1, id)/button/div/div/div
/templatestyle
.box {box-shadow: 0 0 8px gray;padding: 20px;margin: 15px auto;display: flex;align-items: center;
}.p_checkbox {width: 25px;height: 25px;
}.p_image {width: 120px;height: 120px;margin: 0 20px;
}.p_content {align-self: start;position: relative;width: 100%;
}.p_title {margin-bottom: 8px;
}.p_subtitle {font-size: 14px;color: gray;
}.p_price {margin-top: 20px;color: rgb(201, 67, 67);
}.p_count_area {position: absolute;bottom: 0;right: 0;
}.p_count_area button {width: 25px;height: 25px;
}.p_count_area span {margin: 0 10px;
}
/style
最后创建一下 收尾功能的组 Collecrs.vue
script
export default {// 自定义属性props: {isAllChecked: Boolean, // 是否全选allMoney: { type: Number, default: 0 }, // 总金额allCount: { type: Number, default: 0 } // 总个数},// 自定义事件emits: [changeAllCheckedState // 改变全选状态的事件]
}
/scripttemplatediv classcontainer!-- 全选 --labelinput typecheckbox :checkedisAllCheckedchange$emit(changeAllCheckedState, $event.target.checked)全选/label!-- 总金额 --span合计金额strong {{ allMoney }}/strong/spanspan总数{{ allCount }}/span!-- 结算按钮 --button结算【 {{ allCount }} 】/button/div
/templatestyle
.container {padding: 20px;margin: auto 15px;display: flex;justify-content: space-between;align-items: center;
}.container input {width: 25px;height: 25px;
}.container label {display: flex;align-items: center;width: 70px;justify-content: space-between;
}.container strong {color: red;
}.container button {border: none;padding: 15px 25px;background-color: rgb(50, 140, 192);color: white;border-radius: 8px;box-shadow: 0 0 5px gray;
}
/style
