零基础学习Vue: 第5课 Vue指令v-if、v-else-if、v-else 的使用：

最新推荐文章于 2024-07-19 10:04:44 发布

舜岳

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量201

点赞数

分类专栏： vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_41614928/article/details/89296373

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

零基础学习Vue: 第5课 Vue指令v-if、v-else-if、v-else 的使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- a=1所以前两个都是fasle 所以只显示最后一个div-->
    <div v-if="a>2">我是v-if</div>
    <div v-else-if="a>3">我是v-else-if</div>
    <div v-else>我是v-else</div>
  </div>

  <script>
    let vm = new Vue({
      el:"#app",
      data:{
        a:1,
      }
    })
  </script>
</body>
</html>

运行结果如下：


我是v-else

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

舜岳

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础学习Vue: 第5课 Vue指令v-if、v-else-if、v-else 的使用：

零基础学习Vue: 第5课 Vue指令v-if、v-else-if、v-else 的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://c...
复制链接

扫一扫