网站建设网络推广宣传片拍摄构思

当前位置： 首页 > news >正文

网站建设网络推广,宣传片拍摄构思,阿里巴巴国内网站怎么做,专门做期货的网站前言#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