鍍金池/ 問答/網絡安全  HTML/ vue實現(xiàn)淘寶商品詳情頁屬性選擇功能

vue實現(xiàn)淘寶商品詳情頁屬性選擇功能

vue實現(xiàn)淘寶商品詳情頁屬性選擇功能，現(xiàn)在效果是點擊版本和版本和顏色一起都高亮了，要實現(xiàn)點擊版本實現(xiàn)版本對應的高亮點擊顏色實現(xiàn)顏色的對應高亮圖片描述

<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>

怎么修改

回答
編輯回答
艷骨

你好，我剛剛也要開始做這個，但是以前沒有經驗也沒有思路，請問你的兩個框的基本和點擊樣式是用css控制的嗎？具體代碼能不能私信我一下？十分感謝！

2017年6月22日 03:03
編輯回答
情殺

你這是兩個狀態(tài)，所以需要兩個變量來存儲

//template
<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[index2]}" @click="chek(index2,index)">
        {{item2.name}}
    </dt>
</div>

//data
iac:[]
            
//methods
chek(index2,index){
    this.iac[index2]=index
    this.iac = this.iac.concat([])
}
2017年2月18日 11:06