vue实现淘宝商品详情页属性选择功能

最新推荐文章于 2024-01-06 12:40:15 发布

weixin_30488313

最新推荐文章于 2024-01-06 12:40:15 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mei1234/p/9008730.html

本文介绍了两种方法在Vue中实现淘宝商品详情页的属性选择功能，一种利用input[type='radio']，另一种利用数组操作。并给出了相应的HTML、CSS代码及Vue实例。同时还提到了在处理引用类型时的注意事项，并提供了相关参考资料链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一是自己想出来的，方法二来自忘记哪里看到的了

不知道是不是你要的效果：

方法一：利用input[type="radio"]

css代码：

 1     input {
 2         display: none;
 3     }
 4     
 5     input[type="radio"]+label {
 6         /* 默认label的样式 */
 7         /* content: "\a0"; */
 8         display: inline-block;
 9         padding: 10px 20px;
10         background-color: #666;
11         margin-left: 20px;
12         color: #fff;
13         border-radius: 10px;
14     }
15     
16     input[type="radio"]:checked+label {
17         /* 当点击label的时候背景颜色发生改变 */
18         background-color: aqua;
19     }
20     
21     .row {
22         display: inline-block;
23     }