代码结构

一、     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. Vue项目的创建、运行与端口号修改

    前言:Vue-cli是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板,依赖于NodeJS环境 NodeJS下载:NodeJS安装下载 Vue-cli下载:Vue-cli下载 一.Vue图 ...

  2. [洛谷P8867] [NOIP2022] 建造军营

    [NOIP2022] 建造军营 题目描述 A 国与 B 国正在激烈交战中,A 国打算在自己的国土上建造一些军营. A 国的国土由 \(n\) 座城市组成,\(m\) 条双向道路连接这些城市,使得任意两 ...

  3. SpringBoot整个RabbitMQ详细~

    搭建环境 1.安装RabbitMQ,我是用的是Docker方式安装的,大家根据个人习惯自行安装哈 docker run -d -p 5672:5672 -p 15672:15672 --name ra ...

  4. v0.12.0-敏感词/脏词词标签能力进一步增强

    拓展阅读 敏感词工具实现思路 DFA 算法讲解 敏感词库优化流程 java 如何实现开箱即用的敏感词控台服务? 各大平台连敏感词库都没有的吗? v0.10.0-脏词分类标签初步支持 v0.11.0-敏 ...

  5. Python代码中的偏函数

    技术背景 在数学中我们都学过偏导数\(\frac{\partial f(x,y)}{\partial x}\),而这里我们提到的偏函数,指的是\(f(y)(x)\).也就是说,在代码实现的过程中,虽然 ...

  6. python tkinter使用(十一)

    python tkinter使用(十一) 本篇文章主要讲下tkinter 窗口的一些属性,以及实现无法关闭的窗口中遇到的一些问题. #!/usr/bin/python3 # -*- coding: U ...

  7. MinIO客户端之cp

    MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc cp 上传文件至指定桶内,命令如下: ./mc cp ./local.json local1/bkt1/ 控 ...

  8. 【经典问题】mysql和redis数据一致性问题

    前言 MySQL和Redis数据一致性算是个很经典的问题,在之前也看到过很多相关的文章,最近心血来潮,想把一致性问题的解决方案和存在问题都总结一下. 不推荐方案 1 先更新MySQL,再更新Redis ...

  9. MySQL的事务（看看也许有帮助呢）

    MySQL的事务 一.事务的概念 在MySQL中,只有InnoDB存储引擎才支持事务. 事务的处理用来维护数据库数据的完整性,保证同一个事务里的一批SQL语句,要么全部执行,要么全部不执行. 事务用来 ...

  10. java生成企业公章图片源代码

    企业公章图片在电子签章业务中应用广泛,在电子签章应用过程中首先需要生成公章图片,然后再使用公章图片结合数字签名技术完成电子签,这样就实现了从可视化到不可篡改的数字化电子签章功能,以下是企业公章图片生成 ...