美文网首页
vue中V-if与V-show的区别

vue中V-if与V-show的区别

作者: 考拉_2044 | 来源:发表于2018-12-05 20:31 被阅读0次

<body>

    <div id="app">

        <!--

            v-if与v-show 功能基本一样

            他们的区别是:

            # v-if 和 v-show 的区别

            1. v-if 有配套的 v-else-if v-else 来使用,但是 v-show 没有

            2. v-if 是条件渲染。v-show 是条件显示控制元素的dipalse:none。

            3. v-if 如果条件为假,那么元素会别销毁掉。v-show 如果为假,元素不会被销毁,只是简单的设置style的显示隐藏。display

            4. v-if 是惰性的,v-show 是勤快的。

            5. v-if 有更高的切换开销。v-show有初始开销。

        -->

      <button v-show="!isHun">未婚,求婚</button>

    </div>

</body>

</html>

<script src="/js/vue.js"></script>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            isHun:false

        }

    })

</script>

相关文章

  • vue2.0基础知识点

    1、v-if与v-show的区别 条件渲染 (使用v-if) 条件展示 (使用v-show) 2、关于vue中Wa...

  • 第二天

    1、v-show和v-if区别? v-show判断节点是否隐藏 v-if 判断节点是否渲染 2、vue中key的作...

  • Vue中 v-if 和 v-show 的理解

    一、v-show与v-if的共同点 我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含...

  • vue中v-if与v-show的区别

    在 Vue.js 中,使用 v-if 和 v-show 指令来控制条件渲染。 1.二者的区别: v-show :会...

  • v-if与v-show的用法与区别

    标签: vue vue中显隐方法常用两种,v-show和v-if,但这两种是有区别的。 实现本质方法区别vue-s...

  • vue2.0基础(一、内部指令)

    指令 1、条件判断 v-if v-else v-show ### v-if 和v-show的区别: v-if:...

  • 15、v-show与v-if用法和区别

    vue中显隐方法常用两种,v-show和v-if,但这两种是有区别的。实现本质方法区别 vue-show本质就是标...

  • 前端经典问题

    VUE 1、v-show和v-if的区别2、为何v-for中要用key3、描述Vue组件生命周期(有父子组件的情况...

  • Vue面试题

    001、v-show与v-if的区别 v-show:操作的是元素的display属性v-if:操作的是元素的创建和...

  • vue面试题

    Vue面试题 未经允许 禁止转载 1. v-if和v-show的区别 v-show是通过CSS的display来控...

网友评论

      本文标题:vue中V-if与V-show的区别

      本文链接:https://www.haomeiwen.com/subject/dwxgcqtx.html