![]()
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>
凡所有相,皆是虚妄。