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>

运行结果:

相关推荐
Bigfish_coding2 分钟前
前端转agent-第一周【python】-02 FastAPI与Pydantic实战(TS/JS视角)
前端
秃头网友小李3 分钟前
前端难点:Vue3 响应式遇上 Three.js / ECharts —— 为什么要用 shallowRef?
前端·vue.js
梦曦i4 分钟前
Vite插件开发框架:14个实用插件与完整工具包
前端
KaMeidebaby5 分钟前
卡梅德生物技术快报|biotin 生物素标记抗体全流程
前端·人工智能·算法·数据挖掘·数据分析
VitoChang6 分钟前
前端也能快速入门后端! NestJS前台和后台的Auth认证
前端·后端
TheITSea7 分钟前
一、React初体验:搭建、解析现代开发环境
前端·react.js·前端框架
盒马盒马10 分钟前
Rust:String
java·前端·rust
程序猿阿伟13 分钟前
《Chrome非必要服务的精细化关闭指南》
前端·chrome·php
belong_my_offer16 分钟前
理解前端函数
前端
长空任鸟飞_阿康22 分钟前
RAG 文档摄入全链路,从原理到生产落地
vue.js·人工智能·python