v-if的使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
你好
<h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
isShow: false
}
})
</script>
</body>
</html>
1.v-if的使用
即对当前标签根据一个boolean判断是否显示。
<h2 v-if="isShow">{{message}}</h2>
此时isShow的值为false，则页面并不会显示message的内容。
v-if和v-else的使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h2 v-else>isShow为false时，显示我</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
isShow: true
}
})
</script>
</body>
</html>
1.使用规则
当if为false时，则显示用else标记的标签中的内容，if和else在多数语言中都有且用法相似，在这里不做过多的讲解。
v-if和v-else-if和v-else的使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-if="score >= 90">优秀</h2>
<h2 v-else-if="score >= 80">良好</h2>
<h2 v-else-if="score >= 60">及格</h2>
<h2 v-else="score < 60">不及格</h2>
<!-- 当逻辑判断比较多时，不建议写在html里面，可以写在计算属性里 -->
<h1>{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 99
},
computed: {
result() {
let showMessage = ""
if (this.score >= 90) {
showMessage = "优秀"
} else if (this.score >= 80) {
showMessage = "良好"
} else if (this.score >= 60) {
showMessage = "及格"
} else {
showMessage = "不及格"
}
return showMessage
}
}
})
</script>
</body>
</html>
1.v-else-if的使用
当有多个选择项时，可以使用v-else-if进行多层嵌套。if和else在多数语言中都有且用法相似，在这里不做过多的讲解。
用户登录切换的案例
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户帐号</label>
<input type="text" id="username" placeholder="用户帐号" />
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" />
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isUser: true
}
})
</script>
</body>
</html>
1.内容简介
将帐号登录和邮箱登录分别放在if和else标记的标签，点击button切换boolean的值，即可完成操作。
v-show的使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h2 v-show="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
isShow: true
}
})
</script>
</body>
</html>
1.v-show是什么
v-show是和v-if类似的判断是否显示的标签，如果判断变量为false，则标签中内容同样不会显示，代码如下：
<h2 v-show="isShow">{{message}}</h2>
2.v-show和v-if的区别
- v-if判断失败时，则该元素不存在。
- v-show判断失败时，该元素依然存在，只是看不到(display:none)
3.该如何选择
- 当需要在显示与隐藏之间切片很频繁时，推荐使用v-show。
- 当只有一次切换时，推荐使用v-if。
第一次记录自己的学习笔记，如果您发现问题，欢迎指点。
