如果你希望满足某个条件时展示一个HTML片段，使用v-if或v-show，如果不满足时展示另一个HTML片段，就使用v-else：
<div v-if="Math.random() > 0.5"> 条件满足时显示这一块 </div> <div v-else> 条件不满足时显示这一块 </div>
对比Java中的if(条件) {条件成立执行的语句} else {条件不成立执行的语句}
我相信你的脑瓜子已经转了90度，已经完全搞明白Vue的v-else该怎么用了
没错：就是v-if="条件" 条件成立 v-else 条件不成立，有没有发现 v-else离不开v-if，如果没有v-if的存在 v-else将变得毫无意义。
不啰嗦了： 上代码：
<html> <head> <meta charset="utf-8"> <title>Vue-else之指令</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div v-if="10 > 20"> 这个能输出就见鬼了 </div> <div v-else> 你想啥呢，10当然是小于20了 肯定执行我v-else呀！！！ </div> </div> <script> new Vue({ el: '#app' }) </script> </body> </html>
输出：
那么当有多个逻辑条件，我们想一个代码解决了，那么该怎么搞呢，当然还有v-else-if指令喽
这个指令就不用我多说了吧，上代码上代码：
<html>
<head>
<meta charset="utf-8">
<title>Vue 学习</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'"> //全等（===）于代表，类型相同 && 值相同
type全等于 A
</div>
<div v-else-if="type === 'B'">
type全等于 B
</div>
<div v-else-if="type === 'C'">
type全等于 C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C' //给type赋值为'C'
}
})
</script>
</body>
</html>
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。