3 vue的if语法

vue的if语法是相当于一个标签的属性来写进去的,比如说<h1 v-if="">。要注意的是if语句里可以自动从数据层取值的,比如<h1 v-if="message">,这里就会自动把key为message的值取过来,而如果要传一个字符串,需要加一对单引号,比如<h1 v-if = " message==='hello' ",这里的===叫做同等符,比较值和类型是否相等,而==是等值符,类型不同会尝试自动转换类型后再比较值。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			<h1 v-if="message==='hello'">Yes</h1>
			<h1 v-else-if="message==='hehe'">???</h1>
			<h1 v-else>NO</h1>
		</div>
	
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: "hello",
				message2: "nihao"
			}
		});
		</script>
	</body>
</html>

运行结果:

相关推荐
计算机学姐1 天前
基于SpringBoot的高校社团管理系统【协同过滤推荐算法+数据可视化】
java·vue.js·spring boot·后端·mysql·信息可视化·推荐算法
Jonathan Star1 天前
沉浸式雨天海岸:用A-Frame打造WebXR互动场景
前端·javascript
工业甲酰苯胺1 天前
实现 json path 来评估函数式解析器的损耗
java·前端·json
老前端的功夫1 天前
Web应用的永生之术:PWA落地与实践深度指南
java·开发语言·前端·javascript·css·node.js
LilySesy1 天前
ABAP+WHERE字段长度不一致报错解决
java·前端·javascript·bug·sap·abap·alv
Wang's Blog1 天前
前端FAQ: Vue 3 与 Vue 2 相⽐有哪些重要的改进?
前端·javascript·vue.js
再希1 天前
React+Tailwind CSS+Shadcn UI
前端·react.js·ui
用户47949283569151 天前
JavaScript 的 NaN !== NaN 之谜:从 CPU 指令到 IEEE 754 标准的完整解密
前端·javascript
群联云防护小杜1 天前
国产化环境下 Web 应用如何满足等保 2.0?从 Nginx 配置到 AI 防护实战
运维·前端·nginx
ss2731 天前
Springboot + vue 医院管理系统
vue.js·spring boot·后端