📜  Vue.js 条件渲染

📅  最后修改于: 2022-05-13 01:56:29.549000             🧑  作者: Mango

Vue.js 条件渲染

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

Vue 中的条件渲染可以根据特定条件轻松切换 DOM 中任何元素的存在。指令v-ifv-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!        
  


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


HTML


  


  
    

      GeeksforGeeks     

    

Data Structure Course

    

      GeeksforGeeks Self paced Data Structure       course is Awesome!     

       

      Not GeeksforGeeks course!     

     
  


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


文件名: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