需求:在點擊一個按鈕的時候,一個按鈕對應著一個彈窗。

代碼:

子組件:

view：

?

?

思路分析：

在進行第一次點擊的時候, 會進入自己寫的判斷里面。

變量的值為:null? ? ? ? ? ? ? ? ?索引的值為：0

此時不相等,就會對變量就行賦值:

   this.pageindex = index;

通過v-if="index == pageindex"? 變量和索引進行判斷

兩者的值是一樣的，此時就應該顯示當前行的彈窗。

在進行第二次點擊的時候。

變量的值為:0, 索引的值:0。

       this.pageindex = null;

將變量的值賦值為null。

此時

v-if="index == pageindex"

v-if="false",彈窗顯示將會進行關閉。

賦值變量的值是否可以任意設置？

梳理一下思路：

首次點擊:v-if='true'

再次點擊:v-if='false'

通過判斷變量的值和索引的值是否相等來決定是否顯示和隱藏。

第一次點擊過去,打開彈窗，變量和索引的值肯定是相等的。

索引的值是固定的，一行對應著一個索引。

變量的值可以等于其他的值,當最好別和索引相互沖突。

在此點擊的時候,因為變量的值和索引的值相等了索引這個時候讓它不相等。

一直循環下去的一個狀態。

相等-----------------true

不相等----------------false

相等----------------------true

不相等-----------------false

這樣就實現了切換。

用一個圖表進行表示: