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

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

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

方法一:利用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     }

html:

1         <div v-for="(option, index) in options">
2             <p>{{option.name}}</p>
3             <div class="row" v-for="(item, ind) in option.items" @click="select(index, ind)">
4                 <input type="radio" :name="index" :id="item.id" value="">
5                 <!-- 关键在于name这里设为index,让每一行选项的name一样,属性id和label的for属性一致 -->
6                 <label :for="item.id">{{item.msg}}</label>
7             </div>
8         </div>    

vue实例:

 1         data() {
 2                 return {
 3                     id: [‘‘, ‘‘, ‘‘],
 4                     options: [{
 5                         items: [{
 6                             ‘msg‘: ‘绿色‘,
 7                             "id": "11"
 8                         }, {
 9                             ‘msg‘: "红色",
10                             "id": "12"
11                         }],
12                         name: "颜色"
13                     }, {
14                         items: [{
15                             ‘msg‘: "XXX",
16                             "id": "13"
17                         }, {
18                             ‘msg‘: "L",
19                             "id": "14"
20                         }, {
21                             ‘msg‘: "XXL",
22                             "id": "15"
23                         }],
24                         name: "型号"
25                     }, {
26                         items: [{
27                             ‘msg‘: "32G",
28                             "id": "16"
29                         }, {
30                             ‘msg‘: "8G",
31                             "id": "17"
32                         }, {
33                             ‘msg‘: "4G",
34                             "id": "18"
35                         }],
36                         name: "版本"
37                     }]
38                 }
39             },
40             methods: {
41                 select(index, ind) {
42                     var itemId = this.options[index].items[ind].id; //获取选中的id号
43                     this.id.splice(index, 1, itemId); //替换数组id[]中对应的元素,获得所有选中的id
44                     console.log(this.id);
45                 }
46             }    

方法二:利用数组(把每一行当做数组第几个位置eg:a[1]相当于这个数组里的1,每行内选择的元素的索引为数组对应位置的元素值eg:a[1] = xx相当于这里的xx)

css代码:

 1     span {
 2         display: inline-block;
 3         padding: 10px 20px;
 4         background-color: #666;
 5         margin-left: 20px;
 6         color: #fff;
 7         border-radius: 10px;
 8     }
 9
10     .select {
11         background-color: aqua;
12     }
13
14     .row {
15         display: inline-block;
16     }

html代码:

1         <div v-for="(option, index) in options">
2             <p>{{option.name}}</p>
3             <span :class="{select:sel[index] == ind}" v-for="(item, ind) in option.items" @click="select(index, ind)">{{item.msg}}</span>
4         </div>    

vue实例:(data中的数据和上面的options一样省略啦)

 1             data() {
 2                   return {
 3                       sel: [],
 4                       id: [],               options: [],
 5                   }
 6               },
 7               methods: {
 8                   select: function(index, ind) {
 9                          this.sel[index] = ind; //让数组sel的第index+1的元素的值等于ind
10                          this.sel = this.sel.concat([]); //因为数组是引用类型,对其中一个变量直接赋值不会影响到另一个变量(并未操作引用的对象),使用concat(操作了应用对象)
11                          this.id[index] = this.options[index].items[ind].id; //获取选中的id
12                          this.id = this.id.concat([]);
13                          console.log(this.id);
14                   }
15              }           

注意:方法二中的vue实例方法中说到引用类型,推荐看:https://www.cnblogs.com/gromimiss/p/6066268.html

原文地址:https://www.cnblogs.com/mei1234/p/9008730.html

时间: 2024-11-05 20:45:28

vue实现淘宝商品详情页属性选择功能的相关文章

仿京东淘宝商品详情页属性选择js效果

在网上找了好久发现都不符合要求就自己摸索写了一个,用到了linq.js这个linq to js 扩展,不然用纯JS遍历json查询要死人啊 效果图: 代码直接拷贝就可以运行: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/

android仿京东、淘宝商品详情页上拉查看详情

话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大体思路就是这样,具体怎么个实现法代码注释比较详细了,由于比较懒,就不多写了,大家看代码有什么不懂的给我留言就是了.对了,开发工具是android studio.点这里下载:

Vue实现仿淘宝商品详情属性选择的功能

Vue实现仿淘宝商品详情属性选择的功能 2018年09月07日 17:13:35 yx_cos 阅读数:278 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrAndValuees: [   {   'attrId': 1,   'attrName': '味道',   'valuees': [   {   'attrId': 1,   'value': '橘子味'   },   {   'a

iOS开发日记45-类似淘宝商品详情查看翻页效果的实现

今天博主有一个类似淘宝商品详情查看翻页效果的实现的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. 1.使用第三方框架 我用到的第三方库EGORefreshTableHeaderView下拉刷新的效果还有就是PWLoadMoreTableFooterView上拉加载更多 主要的思路在于UISCrollView两页,一页展示商品概况,另一页展示商品更多详情 首先,第一页的view包含一个UITableView,这个tableView实现PWLoadMoreTableFooterView中

ios 类似淘宝商品详情页面的效果

今天试着写ios 类似淘宝商品详情页面的效果 我用到的第三方库EGORefreshTableHeaderView下拉刷新的效果还有就是PWLoadMoreTableFooterView上拉加载更多 主要的思路在于UISCrollView两页,一页展示商品概况,另一页展示商品更多详情 首先,第一页的view包含一个UITableView,这个tableView实现PWLoadMoreTableFooterView中的delegate方法, 实现delegate代理方法的时候使用 - (void)s

Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变

绪论 最近一直比较忙,也没抽出时间来写博客,也不得不说是自己犯了懒癌,人要是一懒就什么事都不想做了,如果不能坚持下来的话,那么估计就废了,??.最近自己攒了好多东西,接下来的时间我会慢慢都分享出来的.好了废话不多说了,下面我们开始正题: 今天要分享的是淘宝的详情页,之前在淘宝上买东西的时候看到淘宝的详情页效果比较不错,所以今天就来仿一下它的效果吧,可能没有淘宝的好,希望见谅啊. 效果图 先上效果图: 这是淘宝的: ? 我自己做的: ? 怎么样效果还差不多吧?GIF图效果看的不太清楚,见谅. 下面

Beatiful Soup获取淘宝商品详情

Beatiful Soup生成商品详情页面的剖析树, 主要函数:findAll(name=None, attrs={}, recursive=True, text=None, limit=None, **kwargs) 利用findAll先获取标签范围的内容,再利用正则表达式进行匹配输出. Beatiful Soup的中文文档: http://www.crummy.com/software/BeautifulSoup/bs3/documentation.zh.html#Searching%20t

Android开发案例 - 淘宝商品详情【转】

http://erehmi.cnblogs.com/ 所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPager, git: castorflex/VerticalViewPager 手势拦截 & 处理 实现思路 上下分页的设计完全可以用垂直分页来实现, 见知识要点[1] 如果使用垂直分页来实现, 那么问题就来了: 上下分页中的内容肯定是支持垂直滚动的

Android开发案例 - 淘宝商品详情

所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式 商品基本参数 & 选购参数在上页展示 商品图文详情等其他信息放在下页展示 知识要点 垂直方向的ViewPager, git: castorflex/VerticalViewPager 手势拦截 & 处理 实现思路 上下分页的设计完全可以用垂直分页来实现, 见知识要点[1] 如果使用垂直分页来实现, 那么问题就来了: 上下分页中的内容肯定是支持垂直滚动的, 如此就会和ViewPager的手势冲突, 因此,