一、简单的演示
<body><div id="app"><p v-if="score>=90">优秀</p><p v-else-if="score>=60">及格</p></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {score: 90,}})</script>
</body>
二、v-if的使用
通过 v-if 里面表达式的结果, 如果为true , 则显示当前行, 反之不显示
<body><div id="app"><!-- 当变量score大于等于90的时候, 当前行显示, 当小于90的时候, 当前行不显示 --><p v-if="score>=90">优秀</p></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {score: 90,}})</script>
</body>
三、v-if和v-else的使用
当v-if后面表达式的值为true的时候显示v-if所在的元素
当v-if后面表达式的值为false的时候显示v-else所在的元素
<body><div id="app"><!-- 当变量score大于等于90的时候, 当前行显示, 当小于90的时候, 当前行不显示 --><!-- 当条件满足时显示当前行 --><p v-if="score>=90">优秀</p><!-- 当条件不满足时显示当前行 --><p v-else>其他</p></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {score: 80,}})</script>
</body>
三、v-if和v-else-if的使用
<body>
<div id="app">
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
</div><script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 50,
}
})
</script>
</body>
v-if和v-show区别
1.相同的：都可以进行显示隐藏
2.不同点：v-if存在或不存在，v-show展示或不展示
3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗
多次的显示隐藏推荐使用v-show
v-if和v-for优先级和使用事项
在vue2中v-for比v-if优先级高
在vue3中v-if比v-for优先级高
v-if和v-for在vue2或vue3中都不要同时使用，
如果需要使用在外层先使用判断，在进行循环
一些区别
v-else,v-cloak,v-once，v-pre不需要带值
v-bind:或:,v-on:或@,v-for,v-if,v-show,v-model
v-else,v-else-if,v-text,v-html,v-cloak,v-once,v-pre,
v-text和v-html，插值 区别
1.相同点：v-text和v-html都会覆盖原本内容
不同点：v-text文本，v-html标签
插值会进行拼接
注：一定不要在用户提交时使用v-html-->
![[HackMyVM]靶场 Espo](http://pic.xiahunao.cn/[HackMyVM]靶场 Espo)
![[BT]小迪安全2023学习笔记（第20天：Web攻防-PHP特性）](http://pic.xiahunao.cn/[BT]小迪安全2023学习笔记（第20天：Web攻防-PHP特性）)
![基础 | JVM - [指令 性能监控]](http://pic.xiahunao.cn/基础 | JVM - [指令 性能监控])
