基於vue-cli li列表的顯示隱藏

效果：點擊“公告標題”，顯示公告內容，點擊同一個“公告標題”多次，顯示與隱藏切換

方法一：

html部分代碼：

<ul class="clist">
   <li v-for="(item,index) in dlist" @click="listClick3(index)" :class="{selected: item.isturn}">
       {{item.title}}
       <div v-for="di in item.data" v-show="item.isturn" @click.stop="">{{di}}</div>
   </li>
</ul>

js部分代碼：

data () {
    return {
         dlist: [{
                  title: '公告標題1',data: ['公告內容1']
              },{
                  title: '公告標題2',data: ['公告內容2']
              },{
                  title: '公告標題3',data: ['公告內容3']
              }
          ],
     }
} ,
methods: {
     listClick3: function(index){
            var _title = this.dlist[index].title,
                _data = this.dlist[index].data,
                _isturn = !this.dlist[index].isturn;
            this.dlist.splice(index,1,{title:_title,data:_data,isturn:_isturn});
     },
}

css代碼：

    .clist li{
        width: 100%;
        line-height: 30px;
        border: 1px solid #dddddd;
    }
    .clist li>div{
        line-height: 30px;
    }
    .clist li.selected{
        color: red;
    }

這里有一個問題是為什么我在點擊事件里寫的方法是用splice，而不是直接this.dlist[index].isturn=!this.dlist[index].isturn呢，畢竟網上百度來的大部分都是這個樣子寫的，原因就是‘=’號不會觸發雙向數據綁定，因為我們在dlist聲明的時候是數組不是變量，變量可以使用‘=’號，數組是不可以的哦

方法二：

html部分代碼：

 <ul class="clist">
     <li v-for="(item,index) in dlist" @click="listClick2(index)" :class="{selected: showlist[index]}">
         {{item.title}}
         <div v-for="di in item.data" v-show="showlist[index]" @click.stop="">{{di}}</div>
     </li>
 </ul>

js部分代碼：

data () {
    return {
           dlist: [{
                  title: '公告標題1',data: ['公告內容1']
              },{
                  title: '公告標題2',data: ['公告內容2']
              },{
                  title: '公告標題3',data: ['公告內容3']
              }
          ],
          showlist: []
    }
}，
created(){
     for(var i=0;i<this.dlist.length;i++){
          this.showlist.push(false);
     }
},
methods:{
    listClick2: function(index){
    　　this.showlist.splice(index,1,!this.showlist[index]);
    },
}

vue的官方文檔有提供相應的api和方法：數組更新檢測

 根據上述api，使用$set方法進行數據的更改：

方法三：

html部分代碼：

<ul class="clist">
   <li v-for="(item,index) in dlist" @click="listClick4(index)" :class="{selected: item.isturn}">
          {{item.title}}
       <div v-for="di in item.data" v-show="item.isturn" @click.stop="">{{di}}</div>
   </li>
</ul>

js部分代碼：

data () {
    return {
             dlist: [{
                  title: '公告標題1',data: ['公告內容1']
              },{
                  title: '公告標題2',data: ['公告內容2']
              },{
                  title: '公告標題3',data: ['公告內容3']
              }
          ],
     }
},
created(){
      for(var x in this.dlist){this.dlist.push(false);//不需要用到this.$set(this.dlist,x,false);created是在元素創建之前，那個時候隨便改動都可以。不需要用set通知vue

      }
},
methods: {
     listClick4: function(index){
         this.dlist[index].isturn = !this.dlist[index].isturn;
         this.$set(this.dlist,index,this.dlist[index]);
     },
}            

方法四：

html部分代碼：

 <ul class="clist">
    <li v-for="(item,index) in dlist" @click="listClick5(index)" :class="{selected: showlist[index]}">
       {{item.title}}
       <div v-for="di in item.data" v-show="showlist[index]" @click.stop="">{{di}}</div>
    </li>
 </ul>

javascript部分代碼：

data () {
    return {
             dlist: [{
                  title: '公告標題1',data: ['公告內容1']
              },{
                  title: '公告標題2',data: ['公告內容2']
              },{
                  title: '公告標題3',data: ['公告內容3']
              }
          ],
    }
},
created(){
    for(var x in this.dlist){
        this.showlist.push(false);
　　　　　
    }
},
methods:{
    listClick5: function(index){
        this.$set(this.showlist,index,!this.showlist[index]);
    },   
}