1 回答

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊
直接上代碼咯,其實(shí)選好被選中屬性的數(shù)據(jù)結(jié)構(gòu)一樣可以解決問(wèn)題
<div class="container">
<div v-for="(item, key) in attr">
<h2>{{item.attrName}}</h2>
<ul>
<li v-for="attrItem of item.attrList" v-bind:class="{active: actAttr[key].value == attrItem.attrVal}" @click="selectItem(key, attrItem.attrVal)">
{{attrItem.attrVal}}
</li>
</ul>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
actAttr: [{
attrName: '顏色',
value: '紅色'
}, {
attrName: '型號(hào)',
value: '中號(hào)'
}],
attr: [{
attrName: '顏色',
attrList: [{
attrVal: '紫色'
}, {
attrVal: '紅色'
}]
}, {
attrName: '型號(hào)',
attrList: [{
attrVal: '大號(hào)'
}, {
attrVal: '中號(hào)'
}, {
attrVal: '小號(hào)'
}]
}]
}
},
methods: {
selectItem (key, val) {
console.log(val)
this.actAttr.splice(key, 1, {
attrName: this.attr[key].attrName,
value: val
})
console.log(this.actAttr[key])
}
}
}
</script>
<style type="text/css">
.container {
text-align: left;
}
.active {
color: red;
}
</style>
添加回答
舉報(bào)