Vue v-else指令

Vue v-else指令教程

Vue v-else 指令为 Vue v-if 添加一个 else 块。Vue v-else 前一兄弟元素必须有 Vue v-if 或 Vue v-else-if。

案列

Vue v-if v-else

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-else 指令</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<p v-if="score >= 60">及格</p>
		<p v-else>不及格</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			score:59
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

44 vue velse.png

因为 score 值小于 60，所以 Vue v-if 并没有被执行，而是执行了 Vue v-else，因此浏览器显示了不及格。

Vue v-else指令总结

Vue v-else 指令为 Vue v-if 添加一个 else 块。Vue v-else 前一兄弟元素必须有 Vue v-if 或 Vue v-else-if。