zoukankan      html  css  js  c++  java
  • 16.VUE学习之-v-show的使用与v-if的差异对比

    v-show的使用与v-if的差异对比

    相同点:

    都可以达到隐藏和显示的效果.

    不同点:

    1. v-show 会用display:none 来隐藏元素节点,推荐使用这种方式
    2. v-if 会移除节点,可以配合v-else-ifv-else 使用
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>vue</title>
        <link rel="stylesheet" href="">
        <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
        <script type="text/javascript" src="../js/vue.js"></script>
    
    </head>
    <body>
        <div id="vue">
            <h2 v-if="status">显示一</h2>
            <h3 v-else>显示二</h3>
            <span v-show="status">显示三</span>
            <br>
    
            <input v-model="status" type="checkbox">
    
        </div>
    
    </body>
    <script type="text/javascript">
        var app = new Vue({
            el: "#vue",
            data:{
                status:true,
            }
        });
    
    </script>
    </html>
    

    效果:

  • 相关阅读:
    29
    28
    27
    950. 按递增顺序显示卡牌
    25
    20190624
    409. 最长回文串
    636. 函数的独占时间
    LeetCode 1046. 最后一块石头的重量(1046. Last Stone Weight) 50
    LeetCode 942. 增减字符串匹配(DI String Match) 49
  • 原文地址:https://www.cnblogs.com/haima/p/10231293.html
Copyright © 2011-2022 走看看