vue学习笔记4——v-if && v-else

一 ： v-if

1. 作用 ： 判断是否加载固定的内容，如果为真，就加载，否则不加载
2. 用处 : 用在权限管理，页面加载
3. 语法 : v-if="判断表达式"
4. 特点 : 控制元素插入或删除，而不是隐藏（v-show是隐藏）
5. v-if与v-show的区别 :

• v-if的安全级别更高，v-show只是隐藏了，通过页面源代码还是可以看到，安全级别低、
• v-if更高的切换消耗（切换消耗指从未加载到加载或者从加载到未加载的状况，需要添加或删除这个元素），v-show需要更高的初始化渲染消耗
• 因此如果需要频繁切换而对安性无要求，使用v-show；如果运行时，条件不能改变，使用v-if

6.v-if和v-for的区别 : 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
举个栗子1

<div id="app">
    <h1 v-if="status == 'ok' ">yes</h1>
    <h1 v-else>no</h1>
</div>
var app = new Vue({
    el : '#app',
    data : {
        status : 'ok'
    }
});

运行结果 ：app.status = 'ok' 则显示yes，status=任何其他的值都显示no
栗子2 ： 一个条件渲染多条语句

<template v-if="status == 'ok'">
    <h1>title</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
</template>

运行结果 ： 条件成立时，这三条语句同时显示在页面上

 title
 paragraph 1
 paragraph 2

拓展一点：
template用于包裹纯文字或者没有大的父级元素包裹的情况下，比如一段文字需要加载，而没有别的元素包裹它，就可以用template来包裹

栗子3

<div id="app4">
    <p v-if="seen">v-if根据条件显示与隐藏</p>
</div>
var app4 = new Vue({
    el : '#app4',
    data : {
        seen : true
    }
})

运行结果 ：

从上述动图我们可以看到 ： v-if如果判断不成立，就不会在DOM中渲染，也不会将对应的语句显示在页面上

二 ：v-else

v-else要紧跟在v-if后面，表示v-if条件不成立时执行

三 ： v-else-if

表示多次，在v-if和v-else中间
栗子4

<div id="app5">
    <div v-if="status == 'loading'"> 
        <div style="background-color:blue">loading</div>
    </div>

    <div v-else-if="status === 'success'">
        <div style="background-color:green">success</div>
    </div>

    <div v-else="status == 'fail'">
        <div style='background-color:red'>fail</div>
    </div>
</div>
var app5 = new Vue({
    el : '#app5',
    data : {
        status : 'loading'
    }
})

运行结果 ：