Demo地址
先准备这样一个vue对象:

<script>
    var app = new Vue({
        el:'#app',
        data:{
            error:false,
            success:false
        }
    });
</script>

先看这段代码:

    <button @click="error=!error">network error</button>
    <button @click="success=!success">network success</button>
    <p v-if="error">网络异常</p>
    <p v-else-if="success">网络正常</p>

这里我们想要实现的功能是:根据error和success的值来显示网络异常或者正常.v-if的作用就是根据值去做判断,v-else-if的作用就类似于if-else中的else.
这里一个注意点:

• v-if如果判断为false,那么vue会帮我们把dom元素去掉.
• v-show的作用类似于v-if,但是它只是把dom元素隐藏display:none.