5 条件渲染

最新推荐文章于 2024-05-14 02:54:32 发布

void1024

最新推荐文章于 2024-05-14 02:54:32 发布

阅读量157

点赞数

分类专栏： Vue记录

本文链接：https://blog.csdn.net/diOSyu/article/details/107501143

版权

Vue记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app-1">
			<h1 v-if="awesome">Vue is awesome!</h1>
			<h1 v-else>Oh no😢.</h1>
		</div>
		<div id="app-2">
			<template v-if="ok">
				<h1>Title</h1>
				<p>Paragraph 1</p>
				<p>Paragraph 2</p>
			</template>
		</div>
		<div id="app-3">
			<div v-if="Math.random() > 0.5">
				Now you see me
			</div>
			<div v-else>
				Now you don't
			</div>
			<h1 v-show="ok" style="color: aquamarine;">Hello!</h1>
		</div>
		<div id="app-4">
			<div v-if="type === 'A'">
				A
			</div>
			<div v-else-if="type === 'B'">
				B
			</div>
			<div v-else-if="type === 'C'">
				C
			</div>
			<div v-else>
				Not A/B/C
			</div>
		</div>
		<div id="app-5">
			<template v-if="loginType === 'username'">
				<label>Username</label>
				<input placeholder="Enter your username" key="username-input">
			</template>
			<template v-else>
				<label>Email</label>
				<input placeholder="Enter your email address" key="email-input">
			</template>
			<button v-on:click="button5Click">Toggle login type</button>
		</div>
		<script>
			var app1 = new Vue({
				el: '#app-1',
				data: {
					awesome: false
				}
			});
			var app2 = new Vue({
				el: '#app-2',
				data: {
					ok: false
				}
			});
			var app3 = new Vue({
				el: '#app-3',
				data: {
					ok: true
				}
			});
			var app4 = new Vue({
				el: '#app-4',
				data: {
					type: 'D'
				}
			});
			var app5 = new Vue({
				el: '#app-5',
				data: {
					loginType: 'username'
				},
				methods: {
					button5Click: function() {
						if (this.loginType == 'username') {
							this.loginType = 'email';
						} else {
							this.loginType = 'username';
						}
					}
				}
			});
		</script>
	</body>
</html>