代码结构

一、     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. 网安靶场环境_DVWA-读取文件报错File not found! Cookie中有两个security键

    DVWA-文件包含漏洞-读取文件报错-ERROR: File not found! Cookie中有两个security键 1 问题复现 (1)登录DVMA后,设置DVWA Security为Low. ...

  2. Android Studio 学习-第三章 Activity 第二组

    事先申明:所有android 类型的学习记录全部基于<第一行代码 Android>第三版,在此感谢郭霖老师的书籍帮助. 1.注册activity 在第一组中,我创建了一个activity, ...

  3. skywalking插件工作原理剖析

    1. 官方插件二次开发 前面在介绍skywalking-agent目录时,提到了它有一个插件目录,并支持动态的开发插件.其实skywalking默认已经提供大部分框架的插件了,一般情况下不需要额外开发 ...

  4. 在 Sealos 中使用区块链技术实现统一支付系统

    拿着区块链技术不一定是去发币,很多业务系统也适合用这些技术,比如做个统一支付系统,积分系统等,可以做为一家公司的金融基础设施,或支付中台.拿链的技术去做有很多好处: 高可用,自带多区域高一致性的能力, ...

  5. 换热站数字孪生 | 图扑智慧供热 3D 可视化

    前言 换热站作为供热系统不可或缺的一部分,其能源消耗对城市环保至关重要.在双碳目标下,供热企业可通过搭建智慧供热系统,实现供热方式的低碳.高效.智能化,从而减少碳排放和能源浪费.通过应用物联网.大数据 ...

  6. LIS和LCS算法分析

    LIS(最长上升子序列) 常规的解法就是动态规划. mx[ j ]表示长度为j的上升子序列最小的值a[i]; dp[ i ]表示前i个数的最长上升子序列长度多少. 1 for(int i=1;i< ...

  7. 将Abp默认事件总线改造为分布式事件总线

    @ 目录 原理 创建分布式事件总线 实现自动订阅和事件转发 使用 启动Redis服务 配置 传递Abp默认事件 传递自定义事件 项目地址 原理 本地事件总线是通过Ioc容器来实现的. IEventBu ...

  8. python tkinter使用(十一)

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

  9. Ubuntu基线指导手册

    Ubuntu基线指导手册 1.   身份鉴别策略组检测 准备: 安装一个PAM模块来启用cracklib支持,这可以提供额外的密码检查功能. 在Debian,Ubuntu或者Linux Mint使用命 ...

  10. BFS（二）转动转盘锁

    对应 LeetCode 752.转动转盘锁 ### 问题定义 你有一个带有四个圆形拨轮的转盘锁.每个拨轮都有10个数字: '0', '1', '2', '3', '4', '5', '6', '7', ...