vue快速入门(六)v-else和v-else-if

注释很详细,直接上代码

上一篇

新增内容

  1. v-else-if用法
  2. v-else用法

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 挂载点 -->
  <div id="root">
    <div v-if="gender === 1">性别:男</div>
    <div v-else>性别:女</div>
    
    <div v-if="level === 'A'">等级:A</div>
    <div v-else-if="level === 'B'">等级:B</div>
    <div v-else>等级:C</div>

  </div>

  <!-- 导入vue的js代码 -->
  <script src="./lib/vue2.js"></script>

  <script>
    const app = new Vue({// Vue实例
      el: '#root',// 挂载点
      data: {// 数据
        gender:1,
        level:'A'
      }
    })
  </script>
</body>
</html>

效果演示

在这里插入图片描述

相关推荐

  1. Vue - v-ifv-else-ifv-else的使用

    2024-04-05 18:24:01       20 阅读
  2. VUE v-if v-show 区别例子

    2024-04-05 18:24:01       25 阅读
  3. Vuev-show v-if 有什么区别

    2024-04-05 18:24:01       24 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-05 18:24:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-05 18:24:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-05 18:24:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-05 18:24:01       18 阅读

热门阅读

  1. nginx压缩文件gzip配置如何实现

    2024-04-05 18:24:01       14 阅读
  2. GPS工具箱导出数据2

    2024-04-05 18:24:01       13 阅读
  3. Zookeeper脑裂解决方案

    2024-04-05 18:24:01       14 阅读
  4. Zookeeper 中的 CAP

    2024-04-05 18:24:01       12 阅读
  5. tcp服务端,时刻在线

    2024-04-05 18:24:01       15 阅读
  6. ubuntu 安装配置samba服务器完整教程

    2024-04-05 18:24:01       12 阅读
  7. C 结构体

    2024-04-05 18:24:01       10 阅读
  8. 1.Swift基础控件:TableView列表

    2024-04-05 18:24:01       14 阅读