Vue 3 - 05 条件语句

2022-04-30 | 0 浏览

4/28 Vue 3 条件语句

条件判断

v-if

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>VUE 条件语句</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<p v-if="seen">Every day is a beautiful day.</p>
	</div>
</body>
<script>
const app = {
	data() {
		return {
			seen:true
		}
	}
}
Vue.createApp(app).mount("#app");
</script>
</html>

v-else

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>VUE IF-ELSE</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<div v-if="weather == 'good'">
			出门
		</div>
		<div v-else>
			不出门
		</div>
	</div>
</body>
<script>
	const app = {
		data(){
			return {
				weather: 'bad'
			}
		}
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

v-show 可以起到同样的判断效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>VUE 条件语句</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<p v-show="ok">Cool.</p>
	</div>
</body>
<script>
const app = {
	data() {
		return {
			ok: 1
		}
	}
}
Vue.createApp(app).mount("#app");
</script>
</html>

凡所有相,皆是虚妄。

前端