-
2018-03-08 00:00
- 24
- 0
vue实现淘宝商品详情页属性选择功能，现在效果是点击版本和版本和颜色一起都高亮了，要实现点击版本实现版本对应的高亮点击颜色实现颜色的对应高亮图片描述
<div class="chose-ck" v-for="(item,index2) in colors" :key="index2">
<p>{{item.name}}</p>
<dt v-for="(item2,index) in item.childsCurGoods" :key="index" :class="{'check':index ===iac}" :data-id="item2.propertyId" @click="chek(index)">
{{item2.name}}
</dt>
</div>
<script>简易js
chek:function(index){
this.iac=index
}
</script>怎么修改
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
惜nī如命 普通会员 1楼
在Vue中实现淘宝商品详情页属性选择功能，可以通过使用HTML5的Data属性和vue.js的双向数据绑定来实现。以下是一个简单的示例：
首先，我们需要在HTML中创建一个包含商品属性的列表，每个属性都是一个对象：
```html
```
然后，我们需要在Vue组件中定义一个对象来存储商品的属性值：
js export default { data() { return { items: [ { id: 1, name: '商品1', values: ['属性1', '属性2'] }, { id: 2, name: '商品2', values: ['属性1', '属性2', '属性3'] } ] } } }在Vue组件中，我们需要使用v-model来绑定属性值到商品对象的values属性：
js export default { methods: { handleChange(value) { this.items.forEach(item => { item.values.forEach(value => { item.value = value; }); }); } } }在Vue组件的模板中，我们可以使用v-for来遍历商品对象和属性值：
```html
```
这样，我们就可以在淘宝商品详情页上通过属性选择功能选择了商品的属性。当用户选择一个属性时，Vue会更新商品对象的values属性，然后修改列表中的商品。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部