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>

运行结果:

相关推荐
Juchecar9 小时前
AI教你常识之 npm / pnpm / package.json
前端
薛定谔的猫29 小时前
前端工程化系列(一):编码规范相关
前端·代码规范·前端工程化
ZKshun9 小时前
[ 前端性能优化 - 图片压缩 ] WebP格式的的图片性能到底有多优秀?
前端
杜蒙9 小时前
React Hooks 详解
前端·javascript
南囝coding9 小时前
Claude Code 从入门到精通:最全配置指南和工具推荐
前端·后端
索马里亚纳海参炒贩9 小时前
useCallback useMemo memo 三个区别和作用
前端·react native
非ban必选9 小时前
netty-scoket.io路径配置
java·服务器·前端
じòぴé南冸じょうげん10 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
会豪10 小时前
Electron主进程渲染进程如何优雅的进行通信
前端
jianghaha201110 小时前
前端 Word 模板参入特定数据 并且下载
前端·word