vue学习第二天【vue.js条件与循环】

最新推荐文章于 2023-03-01 19:09:10 发布

qdd007

最新推荐文章于 2023-03-01 19:09:10 发布

阅读量152

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/superAdmin_root/article/details/93173818

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-if

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vuejs条件与判断</title>
    <script src="vue.min.js"></script>
</head>
<body>
	<div id="app">
		<p v-if="seen">现在你看见我了</p>
		<template v-if="ok">
			<h1>菜鸡宝典</h1>
			<p>hi</p>
			<p>hahaha</p>
		</template>
	</div>

	<script>
	new Vue({
		el: app,
		data: {
			seen: false,
			ok: true
		}
	})
	</script>
</body>
</html>

v-else

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vuejs条件与判断</title>
    <script src="vue.min.js"></script>
</head>
<body>
	<div id="app">
		<div v-if="Math.random() > 0.5">sorry</div>
		<div v-else>
		Not sorry</div>
	</div>

	<script>
	new Vue({
		el: app
	})
	</script>
</body>
</html>

还有v-else-if 用法和java里的if…else if判断是一样的
v-else v-else-if 必须跟v-if 或者v-else-if之后

v-show=“true/false”和 v-if 都可以判断是否展示元素

优惠劵

qdd007

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习第二天【vue.js条件与循环】

v-if<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vuejs条件与判断</title> <script src="vue.min.js"></script></head>&lt...
复制链接

扫一扫