需求:在点击一个按钮的时候,一个按钮对应着一个弹窗。

代码:

子组件:

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

这样就实现了切换。

用一个图表进行表示: