Day16--购物车页面-商品列表-基于props封装radio的勾选状态

news2024/11/24 12:54:37

提纲挈领:

我的操作:

1》打开 my-goods.vue 组件的源代码,为商品的左侧图片区域添加 radio 组件:

 

2》给类名为 goods-item-left 的 view 组件添加样式,实现 radio 组件和 image 组件的左右布局:

 

 1》和2》的效果图:

**************************************************************************************************************

提出一个小问题哈:【因为你在商品列表goods_list的时候你不想看到,如下图所示】这里不需要radio组件的

3》封装名称为 showRadio 的 props 属性,来控制当前组件中是否显示 radio 组件: 

 4》使用 v-if 指令控制 radio 组件的按需展示:

 5》在 cart.vue 页面中的商品列表区域,指定 :show-radio="true" 属性,从而显示 radio 组件:

 

3》和4》和5》的效果图:

情况①:在cart中用my-goods全局组件使用勾选框展示勾选框    情况②:在goods_list中用my-goods全局组件不使用勾选框。

 

6》 修改 my-goods.vue 组件,动态为 radio 绑定选中状态:

 

 效果图:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/53506.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

9 个你可能从未使用过的很棒的 CSS 属性

如今,网络上的每个网站或 Web 应用程序都需要大量的 CSS 代码来装饰它们,这样可以使网站看起来既漂亮又出众。我个人认为如果不使用 CSS,我们将永远不会有一个可以帮助我们脱颖而出的优秀网页设计。 CSS 是一种非常有用的样式表语言&#xf…

记liunx服务器java程序无法访问的问题处理

查看java程序的运行日志: 通过日志查看,在凌晨3点半之后就没有再打印信息了,说明大概在这个点程序已经挂了。 查看liunx的系统日志: 查看linux系统级别的message信息: 在3点半出现了OOM(内存溢出&#xff0…

在构建 Web3 前,需先知道什么是区块链,毕竟 Web3 是基于区块链

什么是区块链 要说什么是区块链,那么这里就不得不提比特币了,它是一种点对点(Peer to Peer,P2P)形式的去中心化加密货币,点对点的传输意味着是一个去中心化的支付系统。比特币的概念最初是由中本聪在2008年…

传奇开服架设教程

传奇架设其实很简单 很多网友非常爱玩这款游戏,可能还有朋友不知道怎么架设这款游戏 今天特意写篇传奇架设教程,希望大家都能打造出真正属于自己的传奇 首先传奇架设需要准备以下几个软件 准备工具: 1、传奇服务端(版本&#…

excel求和怎么操作?这三个简单操作方法,轻松掌握

​excel作为常用的办公软件,不少人都会在工作的时候使用到。其中最常用的一个功能就是使用excel进行求和了。excel求和怎么操作?excel求和的快捷键是什么?今天小编给大家带来了excel求和的三种方法,亲测好用,有需要的小…

C++【类的自动类型转换和强制类型转换】,总要了解一下

学习目标 学习类的自动类型转换和强制类型转换 学习内容 💖类的强制转换数据类型和自动转换数据: 类的强制转换数据类型 想让类的对象强制转换为基本数据类型,需要在类中添加类的转换函数 1、转换函数必须是类方法2、转换函数不能指定返回…

1.2 无监督学习和强化学习

1.2 无监督学习和强化学习无监督学习定义无监督学习与监督学习的区别相关概念流程图强化学习无监督学习 定义 无监督学习 (Unsupervised Learning)是指从无标注数据中学习预测模型的机器学习问题,其本质是学习数据中的统计规律或潜在结构。 无监督学习…

算法与数据结构介绍

算法与数据结构介绍 算法和数据结构不受语言限制,每种编程语言都有关于自己的实现 算法 什么是算法 算法是指解题方案的准确而完整的描述,算法是一系列解决问题的清晰指令,算法使用系统的方法来解决问题的机制。 算法作用 对于实际业务…

Kamiya丨Kamiya艾美捷大鼠成纤维细胞生长因子2说明书

Kamiya艾美捷大鼠成纤维细胞生长因子2,碱性(FGF2)ELISA预期用途: 该试剂盒是一种夹心酶免疫分析法,用于在体外定量测量大鼠FGF2血清、血浆、组织匀浆、细胞裂解物、细胞培养上清液和其他生物液体。对于仅供研究使用。…

laravel vue tailwind normalize

下载laravel最新7.x composer create-project --prefer-dist laravel/laravle blog 7.x-dev cd blog valet link blog valet links blog.test 测试通过后,开始安装tailwind npm i npm i tailwindcss autoprefixer postcss7 都是最新版应该也没有什么问题 在根目录下…

CSS自定义属性与前端页面的主题切换

基于级联变量的CSS自定义属性,已经出来很多年了。 虽然有less、sass等预处理器大行其道,但是自定义属性也有它的特点和用处,诸如在js中读写、作用域设置等等,在处理UI主题切换等功能上也发挥着很大的作用。 自定义属性 CSS自定义…

电影《乌云背后的幸福线》观后感

首先感谢同学推荐这部电影,以前没看过这部电影《乌云背后的幸福线》,看完之后一点想法,希望你能给点启发吧,整部电影讲述一对分别离异的男女再次相爱的故事。打个比方,就好像因为感情不和的小王夫妇离婚了,…

【Spring源码系列】Spring扫描-@ComponentScan底层原理解读

这里写目录标题前言一、ComponentScan注解介绍ComponentScan作用ComponentScan重要参数二、ComponentScan源码分析声明关键点源码解读Spring扫描流程图前言 先不废话了,直接干吧。 一、ComponentScan注解介绍 ComponentScan作用 ComponentScan注解的作用可以简述…

一文搞懂PKI/CA

PKI1. 信息安全1. 1 主要攻击形式1.2 信息安全的目标2. PKI2.1 基本概念2.2 PKI的组成3. 数字证书3.1 基本概念3.2 证书的生成与验证3.3 证书链3.4 证书管理4. 时间戳服务1. 信息安全 随着数字经济、互联网金融、人工智能、大数据、云计算等新技术新应用快速发展,催…

GIS工具maptalks开发手册(二)02——渲染线

GIS工具maptalks开发手册(二)02——渲染线 效果 1、html版本 LineString.html <!DOCTYPE html> <html> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1"> <title>图形…

Redis 的 Java 客户端(Jedis、SpringDataRedis、SpringCache、Redisson)基本操作指南

Jedis 参考&#xff1a; Jedic 官方文档Jedis 托管在 github 上的源码 Redis 不仅是使用命令来操作&#xff0c;现在基本上主流的语言都有客户端支持&#xff0c;比如 java、C、C#、C、php、Node.js、Go 等。在官方网站里列一些 Java 的客户端&#xff0c;有 Jedis、Redisso…

CentOS 7 不显示ip

使用ip add或ifconfig插件看网络信息 进入文件夹/etc/sysconfig/network-scripts 修改对应的ens33网卡的配置文件&#xff0c;默认请工况下CentOS 7不启动网卡&#xff08;ONBOOTno&#xff09; 修改vim ifcfg-ens33中的ONBOOTno为ONBOOTyes 重启服务&#xff1a;service netwo…

【蓝桥杯省赛真题14】python围圈报数 青少年组蓝桥杯python编程省赛真题解析

目录 python围圈报数 一、题目要求 1、编程实现 2、输入输出 3、评分标准

2023年,想要靠做软件测试获得高薪,还有机会吗?

时间过得很快&#xff0c;一眨眼&#xff0c;马上就要进入2023年了&#xff0c;到了年底&#xff0c;最近后台不免又出现了经常被同学问道这几个问题&#xff1a;2023年还能转行软件测试吗&#xff1f;零基础转行可行吗&#xff1f; 本期小编就“2023年&#xff0c;入行软件测…

centernet的数据增强操作--仿射变换

centernet论文与代码剖析_无左无右的博客-CSDN博客_centernet原论文blogfirst_rank_ecpm_v1~rank_v31_ecpm-3-110164808-null-null.nonecase&utm_termcenternet&spm1018.2226.3001.4450 其实在这里也分析过。奈何当初写的代码不知道哪里去了&#xff1b; 本文原地址&am…