鍍金池/ 問答/人工智能  HTML/ vue切換class遇到問題，能否不要每個(gè)一起切換?

vue切換class遇到問題，能否不要每個(gè)一起切換?

在做一個(gè)折疊面板 類似這樣

圖片描述

需求是點(diǎn)擊標(biāo)題后會展開 右邊下箭頭icon也會上切換成上箭頭

遇到的問題是 我展開一個(gè) 每一個(gè)的icon都會一起上下切換....

但我目的是 只要點(diǎn)到的那個(gè)切換阿 而不是每一個(gè)一起切換...

初學(xué)VUE 想問怎么解決這個(gè)問題

我的程式長這樣(只擷取部分)

<i v-bind:class="{ 'el-icon-arrow-down' : isA, 'el-icon-arrow-up': !isA}" @click="onClick()"></i>

js

data() {
 return {isA: true}
},
methods:{
onClick(inputKey) {this.isA = !this.isA;},
}
回答
編輯回答
壞脾滊

你可以給你遍歷這個(gè)列表的數(shù)組中每個(gè)對象添加一個(gè)屬性來綁定class?；蛘呔拖裆厦婺菢樱x一個(gè)等長度的布爾值集合..

2018年5月31日 20:10
編輯回答
扯不斷

怎么都要講綁定的變量分開，現(xiàn)在是都綁定到一個(gè)isA上了，自然是這個(gè)結(jié)果。
例如改成數(shù)組：

<i v-bind:class="{ 'el-icon-arrow-down' : isA[0], 'el-icon-arrow-up': !isA[0]}" @click="onClick(0)"></i>
<i v-bind:class="{ 'el-icon-arrow-down' : isA[1], 'el-icon-arrow-up': !isA[1]}" @click="onClick(1)"></i>
...
data() {
 return {isA: [false,false,false]}
},
methods:{
onClick(index) {this.isA[index] = !this.isA[index];},
}

如有不正之處請諒解指正，謝謝。

2017年8月6日 01:55
編輯回答
伴謊

我覺得你可以借鑒導(dǎo)航欄高亮的思路

2018年1月5日 07:52