Vue.js 条件渲染

Vue.js是一个用于构建用户界面的渐进式框架。核心库仅专注于视图层，易于获取并与其他库集成。 Vue 还可以完美地结合现代工具和支持库来支持复杂的单页应用程序。

Vue 中的条件渲染可以根据特定条件轻松切换 DOM 中任何元素的存在。指令v-if和v-else用于此目的。

v-if指令可用于有条件地渲染块。可以为它分配一个布尔变量，并根据它切换底层 DOM 元素的值。 v-else指令可用于渲染不满足v-if指令条件的块。该指令必须紧跟在v-if指令之后才能工作。 v-else-if指令也可用于链接多个条件。

以下示例演示了 Vue.js 中的条件渲染：

示例 1：在此示例中，如果 isVisible 变量为真，将显示 v-if 指令中给出的文本。

文件名：index.html

HTML

  
  


  
    
      GeeksforGeeks
    
    
      This text is visible!
    
  
  

文件名：app.js

Javascript

const parent = new Vue({
  el : '#parent',
  data : 
    
    // Data is interpolated
    // in the DOM
    isVisible: false
  }
})

输出：

示例 2：

文件名：index.html

HTML

  
  


  
    
      GeeksforGeeks
    
    Data Structure Course
    
      GeeksforGeeks Self paced Data Structure
      course is Awesome!
    
  
    
      Not GeeksforGeeks course!
    
  
  
  

文件名：app.js

Javascript

const parent = new Vue({
  el : '#parent',
  data : {
    
    // Data is interpolated
    // in the DOM
    gfg: true
  }
})

输出：

• 当gfg变量设置为 true 时

• 当gfg变量设置为 false