基于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]);
    },
}