vue框架中，数组长度不变化，数据变化，页面数据展示不联动的解决方案

理论补充ing...

代码如下：

html部分：

  <div >基本信息<div class="switch-btn" @click="isShowPart(0)" >{{partSwitch[0]}}</div></div>

 <div class="form-group" v-show="partSwitch[0] == '收起'">

           <label class="col-sm-2 control-label">XX特征:</label>
                  <div class="col-sm-6">
                          <textarea type="text"  style="min-height:180px;"class="form-control" >
                          </textarea>
                   </div>

  </div>

JS部分：

   data() {
            return {
                partSwitch:['收起','收起','展开','展开','展开','展开'],
            }

        },

实现方案： //控制各个模块的展开收起（）
            isShowPart(partNum){
                if(this.partSwitch[partNum] == '收起'){
                   this.partSwitch.splice(partNum, 1, "展开")
                }else{
                    this.partSwitch.splice(partNum, 1, "收起")
                }
                 
            },

以上代码的目的，是为了，当点击bar上的展开按钮的时候，下面的内容就可以显示出来，随之文案变为“收起”，当点击“收起”按钮的时候，下面部分随之收起。有一种toggle的效果。

由于，一开始只改变了数组内的值，在vue中，会被认为该数组没有发生改变，所以页面上的展示没有发生变化。

所以，后来使用splice方式，先改变数组的长度，再替换原来的值，来实现页面上的交互。

具体理论知识，等待补充...