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

news/2024/7/10 3:16:25 标签: vue.js, javascript, ecmascript, vue

注释很详细,直接上代码

上一篇

新增内容

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

效果演示

在这里插入图片描述


http://www.niftyadmin.cn/n/5469979.html

相关文章

抽象类为什么有抽象方法?

以一个简单的图形绘制程序为例&#xff0c;其中我们将创建一个抽象类Shape&#xff0c;它定义了所有形状共有的行为和属性&#xff0c;同时允许具体的子类提供自己的实现。 首先&#xff0c;我们定义一个抽象类Shape&#xff1a; java public abstract class Shape { // 形状的…

【论文阅读笔记】SAM-Adapter: Adapting Segment Anything in Underperformed Scenes

1.论文介绍 SAM-Adapter: Adapting Segment Anything in Underperformed Scenes SAM适配器&#xff1a;在表现不佳的场景中适配任何片段 2023年 ICCV Paper Code SAM Fails to Segment Anything? – SAM-Adapter: Adapting SAM in Underperformed Scenes: Camouflage, Shado…

深入Tauri开发——从环境搭建到项目构建

深入Tauri开发——从环境搭建到项目构建 开启你的Tauri桌面应用开发之旅&#xff08;续&#xff09; 经过上一篇文章的基础介绍&#xff0c;现在让我们更进一步&#xff0c;详细阐述如何在Windows和macOS平台上顺利搭建Tauri应用所需的开发环境&#xff0c;并指导您从创建项目…

freemarker通过doc模板(xml模板)生成word,list循环添加多张图片

先写好word格式的文档&#xff0c;在其中插入一张图片&#xff0c;然后重命名为ftl,再用编辑器打开&#xff0c;把图片那一段base64信息用freemarker表达式替换掉。 之后把图片的信息输出到模板即可。 多张图片显示&#xff1a;需要注意的是&#xff0c;多张图片显示时&#xf…

jsp实现增删改查——(三)用Echarts图表统计学生信息

学生信息CRUD——Echarts显示生活费 目录结构 创建一个js文件夹&#xff0c;将echarts.min.js放到里面。 功能实现 与之前我们写的jsp文件&#xff08;含有html代码、Java代码&#xff09;不同的是&#xff0c;实现Echarts对生活费的显示&#xff0c;需要调用echarts.min.js…

不讲概念,讲实操,mysql 分表模糊查询、分页查询 及 merge 表的使用

1.Mysql merge合并表的要求 1.合并的分表必须是 MyISAM 引擎&#xff0c;MyISAN引擎是不支持事务的。2.Merge表只保证合表后数据唯一性&#xff0c;合表前的数据可能会存在重复。3.表的结构必须一致&#xff0c;包括索引、字段类型、引擎和字符集。4.删除 tb_member1 分表正确…

超势垒整流器选型参数,结构原理,工艺与注意问题总结

🏡《总目录》 目录 1,概述2,工作原理3,结构特点4,工艺流程4.1,材料准备4.2,清洗与预处理4.3,外延生长4.4,掺杂与扩散4.5,刻蚀与隔离4.6,金属化4.7,测试与筛选4.8,封装与测试5,选型参数

Tokio强大的Rust异步框架

一、简介 异步是现在编写高性能应用的核心要素之一&#xff0c;很多语言都已经纷纷加入异步的特效。C#应该是最先做出响应的语言。连微软这位软件大佬都非常重视异步&#xff0c;可见异步编程重要性。 在Rust中同样支持异步编程&#xff0c;只不过一般我们不会使用Rust官方&a…