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>

运行结果:

相关推荐
知兀6 小时前
框架脚手架搭建,推送github一键使用
javascript·vue.js·ecmascript
慧都小项6 小时前
从 Figma 到 Qt:Qtitan 能减少哪些界面还原工作?
前端·qt·嵌入式·figma·图形界面·工业界面·qtitan
YWL6 小时前
OpenLayers导出功能:地图截图+GeoJSON导出完整方案,从Canvas合并到PDF生成
前端·vue·openlayers
苦瓜小生6 小时前
【前端】【力扣与手撕】十天带你刷完前端算法与手撕,全是最简单好记的最优解法!day4
前端·数据结构·算法·leetcode·面试
mayaairi6 小时前
Vue2 实战进阶:表单数据收集、指令系统与自定义指令全解析
前端·javascript·vue.js
计算机魔术师6 小时前
实测GPT-6 Astra后,我发现过去十年的专业门槛正在失效
前端
虎头金猫6 小时前
Pic Smaller 本地部署:压缩图片、转换格式,再搭建自己的 Web 工具
运维·前端·开源·aigc·ai编程·ai写作
hunterandroid6 小时前
Android ANR 排查实战:从线上告警到主线程卡点定位
android·前端
图扑软件7 小时前
下篇・换墨|主题/多语言/移动端,一套组件全覆盖
前端·javascript·ui·性能优化·数据可视化
程序员老赵7 小时前
Docker 部署 TeX Live:轻松搭建 LaTeX 论文排版编译平台
前端·docker·latex