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.
