Vue的条件语句

条件判断：
v-if：条件判断使用 v-if 指令
在html：

<div id="app" style="margin-top:100px;">
        <h1>v-if 条件</h1>
        <button @click="error = !error" type="button" class="btn btn-info"> Toggle error</button>
        <button @click="success = !success" type="button" class="btn btn-info">Toggle success</button>
        <p v-if="error">网络连接失败404</p>
        <p v-if="success">网络连接成功</p>
    </div>

在JS：

new Vue({
            el: "#app",
            data: {
                error : false,
                success :false
            }
        })

首先定义error为false，success为false，绑定两个按钮点击事件，绑定两个条件判断语句，只有error和success为true的时候，才会触发。


v-if的语句不会占用html，只有触发条件为真的时候才会占用html的空间

v-else：
可以用 v-else 指令给 v-if 添加一个 “else” 块：

<p v-if="error">网络连接失败404</p>
 <p v-else="success">网络连接成功</p>

v-if为真就执行，不为真就执行v-else语句

v-else-if
v-else-if ，用作 v-if 的 else-if 块。可以链式的多次使用：

v-show:
我们也可以使用 v-show 指令来根据条件展示元素：

<div id="app" style="margin-top:100px;">
        <h1>v-if 条件</h1>
        <button @click="error = !error" type="button" class="btn btn-info"> Toggle error</button>
        <button @click="success = !success" type="button" class="btn btn-info">Toggle success</button>
        <p v-show="error">网络连接失败404</p>
        <p v-show="success">网络连接成功</p>
    </div>


new Vue({
            el: "#app",
            data: {
                error : false,
                success :false
            }
        })

v-show与v-if相似，但是最大的区别就是v-show就算条件判断为假，会占用html的空间