Vue实现仿淘宝商品详情属性选择的功能_weixin_30722589..._CSDN博客

来自 : CSDN技术社区 发布时间：2021-03-25

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

先看下效果图 同个属性内部单选 属性与属性之间可以多选

主要实现过程

所使用到的数据类型是 一个大数组里面嵌套了另一个数组 具体格式如下

  attrAndValuees: [   {   attrId : 1,   attrName : 味道 ,   valuees : [   {   attrId : 1,   value : 橘子味   },   {   attrId : 2,   value : 草莓味   }   ]   },   {   attrId : 2,   attrName : 容量 ,   valuees : [   {   attrId : 4,   value : 100ml   },   {   attrId : 6,   value : 300ml   }   ]   }]

相关的Html 代码

  div class sortItem v-for (item,index) in attrAndValuees :key item.attrId   span {{item.attrName}}: /span   ul   li v-for (itemm,ind) in item.valuees :key itemm.attrId :class { cur :sel[index] ind} click select(index,ind) class hand {{itemm.value}} /li   /ul   /div

实现的原理 新建一个数组 数组的每一项代表一个属性值 由这个数组中的值来改变对应属性的样式

在data里新增一个数组

  data () {   return {   sel: []   }

在methods中新增一个select方法 在点击属性值的时候调用

  select: function (index, ind) {   this.sel[index] ind;   this.$set(this.sel, index, ind)   // this.sel this.sel.concat([]);       }

就以上几个小步骤就可以实现这个效果了 是不是so easy~

不过这中间需要注意的有几点

Vue之所以能够监听Model状态的变化 是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是 对于数组元素的赋值 却没有办法直接监听 因此 在这个项目中我们用了set的方法来给数组赋值或者用concat连接一个空数组来对数组进行重新赋值。

若你想了解更多关于数组赋值的知识 可访问官网 https://cn.vuejs.org/v2/guide/list.html

2018年10月15日{{item.attrName}}: <liv-for="(itemm,ind) in item.valuees":key="itemm.attrId":class="{'cur':sel[index] == ind}" @click="select(index,...Vue实现仿淘宝商品详情属性选择的功能Vue实现仿淘宝商品详情属性选择的功能先看下效果图：（同个属性内部单选，属性与属性之间可以多选）主要实现过程：所使用到的数据类型是（一个大数组里面嵌套了另一个数组）具体格式如下：attrAndValuees: [{'attrId': 1,'a...Vue实现仿淘宝商品详情属性选择的功能