Vue.js 中的 v-else-if 指令

v-else-if指令是一个Vue.js指令，用于在不满足 if 条件时根据条件切换元素的显示 CSS 属性。首先，我们将创建一个 id 为app的 div 元素，然后将v-else-if指令应用于具有数据的元素。现在我们将通过使用包含该值的 data 属性初始化一个 Vue 实例来创建此数据。

句法：

v-else-if="data"

参数：此函数接受单个参数，即数据或条件。

示例 1：此示例使用 Vue.js 使用算术条件显示带有 v-else-if 的元素。

  

    
        VueJS | v-else-if directive
    
  
    
    
    

  

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

  
            

输出：

示例 2：此示例使用 Vue.js 使用布尔值显示带有 v-else-if 的元素。

  

    
        VueJS | v-else-if directive
    
  
    
    
    

  

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

  
                   

输出：