vue v-if和v-show的区别

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <div @click="toggleShow(index)">
          这里是正常显示的部分，通过点击触发隐藏部分显示或隐藏
        </div>
        <div v-show="item.show">
          这里是隐藏的部分
        </div>
      </li>
    </ul>
    <div class="box" v-if="show"></div>
  </div>
</template>
 
<script>
  import Vue from 'vue'
  export default {
    name: 'status',
    data: function() {
      return {
        list: [{
            id: 1,
            title: '项目一',
            show: false
          },
          {
            id: 2,
            title: '项目二',
            show: false
          },
          {
            id: 3,
            title: '项目三',
            show: false
          }
        ],
        show:false
      }
    },
    created: function() {
 
    },
    methods: {
      toggleShow(index) {
        this.list[index].show = !this.list[index].show
      }
    }
  }
</script>
 
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

import demo1 from '@/components/demo1'
 
Vue.use(Router)
 
export default new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'index',
    component: index
  }, {
    path: '/render',
    name: 'render',
    component: render
  }, {
    path: '/preview',
    name: 'preview',
    component: preview
  },{
    path: '/demo1',
    name: 'demo1',
    component: demo1
  }]
})