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的空间