Vue指令篇_v-if、v-else、v-else-if

目录

1.v-if

2.v-else

 3.v-else-if

4.v-show

5.v-if 和 v-show 比较

---

1.v-if

作用：条件性的渲染一块内容，这块内容只会在指令的表达式为真值时被渲染。

    
姓名：{
    { stu1.name }}
 //渲染
    
年龄：{
    { stu1.age }}
 //不渲染
    
姓名：{
    { stu2.name }}
    
年龄：{
    { stu1.age }}

const vm = new Vue({
    el: '#app',
    data: {
        stu1: {
            name: "JWH",
            age: 18
        },
        stu2: {
            name: "DQS",
            age: 18
        }
    }
})

【结果】stu1.age不渲染

【注】若想切换多个元素，则可以将其包裹在不可见元素