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>

运行结果:

相关推荐
溪语流沙7 小时前
【Web全栈进阶】OAuth实战——GitHub第三方登录
前端·python·github
小陈运维7 小时前
微WEB文件服务 Docker 部署指南
前端·docker·容器
lichenyang4537 小时前
从 Prettier 开始整理前端开发常用命令
前端
哦虎!7 小时前
【前端】HTML
前端·html
FY@-@7 小时前
Shell 脚本编程:条件判断与循环
linux·运维·前端
Source.Liu7 小时前
【A11】拆分前端,实现多页面方案
前端·rust
涛涛ing8 小时前
Navigation API正式Baseline:那个让无数前端头疼的History API,终于可以退休了
前端
Hilaku8 小时前
为什么我劝应届生不要去创业公司写前端?
前端·javascript·程序员
郑州光合科技余经理8 小时前
出海外卖平台:支付对接为什么要和下单收款分开
android·java·开发语言·前端·后端·php·ai编程
data analyse 4568 小时前
前端自建访问统计,访客标识怎么设计才稳?Cookie、本地存储与设备指纹的取舍
前端·数据分析