Vue中v-if和v-show的不同及其实现原理

各位好，本人瓜哥，最近接触前端项目比较多，尤其当前vue使用相当流行。对于vue中的条件指令 v-if和 v-show更容易混淆。

相应使用演示请下载https://gitee.com/yangdechao_admin/vue-guage.git，具体代码请查看demo1.vue

实现原理

v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐

1. 使用了 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。
2. v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏

demo实验

在vue项目中创建demo1.vue文件，如下面内容

<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>

然后在项目路由中添加对应的路由/demo1

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
  }]
})

 预览效果

通过http://localhost:8080/demo1访问打开对于的路由页面