Vue指令之v-else篇

最新推荐文章于 2023-12-12 14:47:24 发布

雪子

最新推荐文章于 2023-12-12 14:47:24 发布

阅读量6.4k

点赞数 3

分类专栏： Vue 文章标签： Vue 前端

本文链接：https://blog.csdn.net/Kermit_father/article/details/82722488

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

讲完v-if篇，那么接下里我们就说说v-else喽

对比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>

一不留神，就学完了v-else和v-else-if，嘿嘿嘿！！！

原创是时间，转载注明：https://blog.csdn.net/Kermit_father

雪子

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
Vue指令之v-else篇

讲完v-if篇，那么接下里我们就说说v-else喽对比java中的if(条件) {条件成立执行的语句} else {条件不成立执行的语句}我相信你的脑瓜子已经转了90度，已经完全搞明白Vue的v-else该怎么用了没错：就是v-if="条件" 条件成立 v-else 条件不成立，有没有发现 v-else离不开v-if，如果没有v-if的存在 v-else将变得毫无意义。不啰嗦了： ...
复制链接

扫一扫