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>

运行结果:

相关推荐
weixin_4713830334 分钟前
React Flow + Zustand 搭建工作流编排工作台
前端·react.js·前端框架
kilito_0135 分钟前
react疑难讲解
前端·react.js·前端框架
青柠代码录39 分钟前
【Vite】vite.config.ts 配置详解(Vite 8)
vue.js
字节跳动的猫41 分钟前
2026 四款 AI:开发场景适配全面解析
前端·人工智能·开源
gyx_这个杀手不太冷静1 小时前
大人工智能时代下前端界面全新开发模式的思考(四)
前端·架构·ai编程
Ruihong1 小时前
你的 Vue 3 useAttrs(),VuReact 会编译成什么样的 React?
vue.js·react.js·面试
时寒的笔记1 小时前
js逆向_webpack讲解加载器&酷某音乐案例
开发语言·javascript·webpack
李剑一1 小时前
我做了个微信聊天模拟器,已开源
前端
yusirxiaer1 小时前
为什么 markRaw 能修复 Vue 3 + ECharts 的 resize 报错
javascript·vue.js·echarts
代码搬运媛2 小时前
30分钟带你从0手搓一个AI-Cli命令行工具
前端