Vue.js | v-if 指令

v-if指令是一个Vue.js指令，用于使用条件切换元素的显示 CSS 属性。如果条件为真，它将使其可见，否则它将使其不可见。首先，我们将创建一个 id 为app的 div 元素，然后将v-if指令应用到这个带有数据的元素。现在我们将通过使用包含该值的 data 属性初始化一个 Vue 实例来创建此数据。

句法：

v-if="data"

参数：该指令接受单个参数，即数据或条件。
示例 1：此示例使用 VueJS 显示带有 v-if 的元素。

HTML

  

    
        VueJS | v-if directive
    
  
    
    
    

  

    
        
            GeeksforGeeks
        
        
            VueJS | v-if directive
        
    
  
    
        
            
              This if condition is executed
            
        
    
  
    
        var app = new Vue({
            el: '#app',
            data: {
                message: true
            }
        })
    

输出：

示例 2：此示例使用 VueJS 显示具有 v-if 算术条件的元素。

HTML

  

    
        VueJS | v-if directive
    
  
    
    
    

  

    
        
            GeeksforGeeks
        
        
            VueJS | v-if directive
        
    
  
    
        
            a is greater than 10
            a is smaller than 10
            a is equal to 10
        
    
  
    
        var app = new Vue({
            el: '#app',
            data: {
                a: 9
            }
        })
    

输出：