<vue 基础知识 6、条件判断标签v-if>
代码结构
一、 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>
资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！
