<vue 6、條件判斷標籤v-if>
阿新 • • 發佈：2021-11-19
程式碼結構
一、 01-v-if用法
1、效果
根據分數的不同展現不同的漢字
2、程式碼
01-v-if用法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-v-if用法</title>
</head>
<body>
<div id="app">
<div v-if="score >= 90">遊樂場玩</div>
<div v-else>學習</div>
<div v-if="score>=90">優秀</div>
<div v-else-if="score>=80">良好</div>
<div v-else-if="score>=60">及格</div>
<div v-else>不及格</div>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
score: 85
}
})
</script>
</body>
</html>
二、 v-if和v-show區別
1、 效果
v-if當條件為false時，壓根不會有對應的元素在DOM中。
v-show當條件為false時，僅僅是將元素的display屬性設定為none而已
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-if和v-show區別</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">不錯</h2>
<h2 v-show="isShow">很好</h2>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
isShow: false
}
})
</script>
</body>
</html>
2、程式碼
v-if和v-show區別.html
三、03-條件渲染案例
1、效果
2、程式碼
03-條件渲染案例.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-條件渲染案例</title>
</head>
<body>
<div id="app">
<div v-if="type==='username'">
<label for="username">使用者賬號</label>
<input type="text" id="username" placeholder="使用者賬號" key="username">
</div>
<div v-if="type==='email'">
<label for="email">使用者郵箱</label>
<input type="text" id="email" placeholder="使用者郵箱" key="email">
</div>
<button @click="btnClick">切換型別</button>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
type: 'username'
},
methods: {
btnClick() {
this.type = this.type === 'username' ? 'email' : 'username'
}
}
})
</script>
</body>
</html>