欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-30 22:28:57
...

各位好,本人瓜哥,最近接触前端项目比较多,尤其当前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访问打开对于的路由页面

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

相关标签: vue