代码结构

一、     01-v-if用法

1、效果

根据分数的不同展现不同的汉字

2、代码

01-v-if用法.html

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>01-v-if用法</title>

	</head>

	<body>

		<div id="app">

			<div v-if="score >= 90">游乐场玩</div>

			<div v-else>学习</div>

			<div v-if="score>=90">优秀</div>

			<div v-else-if="score>=80">良好</div>

			<div v-else-if="score>=60">及格</div>

			<div v-else>不及格</div>

		</div>

		<script src="vue.js"></script>

		<script>

			let app = new Vue({

				el: '#app',

				data: {

					score: 85

				}

			})

		</script>

	</body>

</html>

二、     v-if和v-show区别

1、 效果

v-if当条件为false时，压根不会有对应的元素在DOM中。

v-show当条件为false时，仅仅是将元素的display属性设置为none而已

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>02-v-if和v-show区别</title>

	</head>

	<body>

		<div id="app">

			<h2 v-if="isShow">不错</h2>

			<h2 v-show="isShow">很好</h2>

		</div>

		<script src="vue.js"></script>

		<script>

			let app = new Vue({

				el: '#app',

				data: {

					isShow: false

				}

			})

		</script>

	</body>

</html>

2、代码

v-if和v-show区别.html

三、03-条件渲染案例

1、效果

2、代码

03-条件渲染案例.html

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>03-条件渲染案例</title>

	</head>

	<body>

		<div id="app">

			<div v-if="type==='username'">

				<label for="username">用户账号</label>

				<input type="text" id="username" placeholder="用户账号" key="username">

			</div>

			<div v-if="type==='email'">

				<label for="email">用户邮箱</label>

				<input type="text" id="email" placeholder="用户邮箱" key="email">

			</div>

			<button @click="btnClick">切换类型</button>

		</div>

		<script src="vue.js"></script>

		<script>

			let app = new Vue({

				el: '#app',

				data: {

					type: 'username'

				},

				methods: {

					btnClick() {

						this.type = this.type === 'username' ? 'email' : 'username'

					}

				}

			})

		</script>

	</body>

</html>

推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！

<vue 基础知识 6、条件判断标签v-if>的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. 在NET8中使用简化的 AddJwtBearer 认证

    开发环境 系统版本: win10 .NET SDK: NET8 开发工具:vscode 参考引用:使用 dotnet user-jwts 管理开发中的 JSON Web 令牌 注意:以下示例中的端口. ...

  2. [ABC248G] GCD cost on the tree

    Problem Statement You are given an undirected tree with $N$ vertices. Let us call the vertices Verte ...

  3. 2023-12-13：用go语言，密码是一串长度为n的小写字母，一则关于密码的线索纸条， 首先将字母a到z编号为0到25编号， 纸条上共有n个整数ai，其中a1表示密码里第一个字母的编号， 若i＞1的

    2023-12-13:用go语言,密码是一串长度为n的小写字母,一则关于密码的线索纸条, 首先将字母a到z编号为0到25编号, 纸条上共有n个整数ai,其中a1表示密码里第一个字母的编号, 若i> ...

  4. JXNU acm选拔赛 不安全字符串

    不安全字符串 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submis ...

  5. 【内核】kernel 热升级-1：kexec 机制

    内核热升级是指,预先准备好需要升级的内核镜像文件,在秒级时间内,完成内核切换,追求用户服务进程无感知. 欧拉操作系统提供了一套比较成熟的解决方案,该解决方案提供了用户态程序和内核态程序两部分: kex ...

  6. 开源数据血缘和元数据管理框架DataHub的血缘摄取 V0.12.1版本

    DataHUb的安装很简单:你有绿色上网就soeasy 前置条件,你已经运行好DataHub整个Docker-Compse服务 打开地址:http://host:9002/ 输入账号DataHub 密 ...

  7. 【eBPF-02】入门：基于 BCC 框架的程序进阶

    本文是 eBPF 系列的第二篇文章,我们来学习 eBPF BCC 框架的进阶用法,对上一篇文章中的代码进行升级,动态输出进程运行时的参数情况. 主要内容包括: 通过 kprobe 挂载内核事件的 eB ...

  8. String与StringBuilder的互相转换

    String与StringBuilder的互相转换 String转StringBulider StringBuilder sb = new StringBuilder(); sb.append(use ...

  9. 聊聊ChatGLM6B的微调脚本及与Huggingface的关联

    本文首先分析微调脚本trainer.sh的内容,再剖析ChatGLM是如何与Huggingface平台对接,实现transformers库的API直接调用ChatGLM模型,最后定位到了ChatGLM ...

  10. VSCode C++开发环境配置：CMake 调试配置 launch.json

    相关内容 VSCode C++开发环境配置: LLVM clang clangd 安装 cmake sudo apt install cmake 安装 VSCode 插件 CMake CMakeToo ...