Vue for循环列表控制显示隐藏

点击每一列，可以展开效果

实现原理：

方法一：

<ul id="app">
 <li v-for='item in items' @click="toggle(item)">
  <span v-if='item.show'>{{item.content}}</span>
 </li>
</ul>
new Vue({
 el: '#app',
 data: function() {
  return {
   items: [{
    content: '1 item',
    show: true
   }, {
    content: '2 item',
    show: true
   }, {
    content: '3 item',
    show: true
   }]
  }
 },
 methods: {
  toggle: function(item) {
      item.show = !item.show;
  }
 }
})

方法二：

<template>
    <div class="test-wrapper">
        <div class="article-list-item" v-for="(item,index) in list" :key="index"
        @click="ArticleDetail(index)">
            <div class="shareAnimate" v-show="activeIndex===index">
                {{item.name}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "test",
    data() {
        return {
            activeIndex: -1 // 初始化点击的索引值
        };
    },
    methods: {
        ArticleDetail(index) {
            this.activeIndex = index;
        }
    }
}
</script>