vue中v-if和v-show区别

最新推荐文章于 2024-07-10 19:23:02 发布

素白、就好

最新推荐文章于 2024-07-10 19:23:02 发布

阅读量147

点赞数

分类专栏： H5大前端 vue.js 文章标签： vue v-if v-show

本文链接：https://blog.csdn.net/weixin_44256283/article/details/88650642

版权

H5大前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue.js

3 篇文章 0 订阅

订阅专栏

v-if是一个指令判断条件：当为true时显示标签

标签会从html文档中被移除或者插入

v-show

标签还在html文档中，只是修改了标签的显示属性（display:none）

 <div id="app">
    <span v-if="isShow">我是一个span标签</span>
    <span v-show="isShow">我是一个span标签,使用v-show控制</span>
    <button v-on:click="toggleHandle">toggle</button>
  </div>
  <script src="./lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        isShow: true,
      },
      methods: {
        toggleHandle: function() {
          this.isShow = !this.isShow;
        },
      },
    })
  </script>