前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue v-if和v-show的区别

vue v-if和v-show的区别

原创
作者头像
用户1349575
发布2022-02-16 21:15:14
5950
发布2022-02-16 21:15:14
举报
文章被收录于专栏:编程社区编程社区

相同点:

都是通过条件判断来对识图进行展示或隐藏;

区别:

v-if:

根据判断的条件会动态的删除或创建DOM元素,当项目较大时,如果使用v-if来隐藏或显示元素,频繁的DOM操作会影响页面的加载速度和性能。

v-if是存在惰性的,只在条件成立时才渲染条件为真的DOM标签条件为假不会去渲染标签。

v-show:

仅在初始化页面时加载一次,后面进行条件判断来控制元素的display属性,条件为假的DOM依然存在存在,只不过其display属性值为none,在页面不显示。因此当页面中需要频繁切换时,建议使用v-show。

v-show控制的display属性值,无论条件是否成立,都会渲染标签。

demo实验

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

代码语言:javascript
复制
<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

代码语言:javascript
复制
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
  }]
})

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档