vue.js如何寫折疊面板的列表

主要就在于html結(jié)構(gòu)上，
給標(biāo)題加上click事件 @click="show(i)"
給內(nèi)容綁定class事件，在點擊的時候讓對應(yīng)內(nèi)容加上active這個class讓他顯示
差不多是這樣的，看下能理解不

html

<div class="container">
  <ul>
    <li v-for="(title,i) in list.title">
      <p class="title" v-text="title" @click="show(i)"></p>
      <div class="content" v-bind:class="{active:index==i}" v-text="list.content[i]"></div>
    </li>
  </ul>
</div>

css部分

.container{
  width: 100%;
}

.container ul{
  width: 100%;
}

.container li p.title{
  width: 100%;
  line-height: 60px;
  font-size: 18px;
  color: #000;
}

.container li p.active{
  color: #f00;
}

.container li .content{
  background-color: #f3f3f3;
  padding: 10px;
  box-sizing:border-box;
  font-size: 14px;
  line-height: 20px;
  display: none;
}

.container li div.active{
  display: block;
}

js部分

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
$(document).ready(function(){

var a = {
  title:["1注冊是支行信息如何進(jìn)行填寫？","2商戶推薦碼是什么","3合同位置是否可以修改"],
  content:["1結(jié)算賬戶的填寫，需要選擇下拉菜單中的開戶行及支行全程，不可收天，否則無法成功提交。","2結(jié)算賬戶的填寫，需要選擇下拉菜單中的開戶行及支行全程，不可收天，否則無法成功提交。","3結(jié)算賬戶的填寫，需要選擇下拉菜單中的開戶行及支行全程，不可收天，否則無法成功提交。"]
};

new Vue({
  el:".container",
  data:{
    list:a,
    index:-1
  },
  methods:{
    show:function(j){
      this.index = j;
    }
  }
})

});
</script>

可以用v-if或者v-show來控制顯示與隱藏

樓主最后是怎么解決這個問題

直接寫倒也能寫，不過也可以試試用ElementUI試試呀，挺好的，直接有這個：
http://element-cn.eleme.io/2....

自己碼啊，標(biāo)題為一個層級，展開的內(nèi)容為該層級下的另一個層級，通過v-show來控制其顯示隱藏。如果是數(shù)組循環(huán)的話，設(shè)置一個數(shù)組變量。

<ul>
    <li v-for="(item,index) in list">
        <p>注冊是支行信息如何進(jìn)行填寫？<span @click="changeContent(index)"></span></p>
        <div v-show="item.showContent">
            結(jié)算賬戶的填寫...
        </div>
    </li>
</ul>

data(){
    return{
        list:[{'title':'注冊是支行信息如何進(jìn)行填寫？','showContent':false,...},{'title':'注冊是支行信息如何進(jìn)行填寫？','showContent':false,...}...]
    }
},
methods:{
    changeContent:function(index){
        var temp = this.list
        temp[index].showContent = ! temp[index].showContent
        this.list = temp
    }
}

獲取數(shù)據(jù)的時候給每個數(shù)據(jù)一個標(biāo)識 xxflag = true/false之類的，每次點擊更新數(shù)組里面對應(yīng)的flag就可以了