Vue.js | v-show 指令

v-show指令是一个Vue.js指令，用于使用我们的数据切换元素的显示 CSS 属性。如果数据为真，它将使其可见，否则它将使其不可见。首先，我们将创建一个 id 为app的 div 元素，然后将v-show指令应用于该元素，并将数据作为消息。现在我们将通过使用包含 true 或 false 的 data 属性初始化 Vue 实例来创建此消息。
句法：

v-show="data"

参数：该指令接受一个参数，即数据。
示例 1：此示例使用 VueJS 来显示带有 v-show 的元素。

HTML

    
        
            VueJS | v-show directive
        
  
        
        
        
    
  
    
        
            
                GeeksforGeeks
            
            
                VueJS | v-show directive
            
        
  
        
            
                Hello I'm visible.
            
        
  
        
            var app = new Vue({
                el: "#app",
                data: {
                    message: true,
                },
            });
        
    

输出：

示例 2：此示例使用VueJS通过 v-show 隐藏元素。

HTML

  

    
        VueJS | v-show directive
    
  
    
    
    

  

    
        
            GeeksforGeeks
        
        
            VueJS | v-show directive
        
    
  
    
        
            Hello I'm invisible.
        
    
  
    
        var app = new Vue({
            el: '#app',
            data: {
                message: false
            }
        })
    

  

输出：