Vue.jpeg
📝【Vue】学习养成记，【程序员必备小知识】
📔 今日小知识——Vue常用指令之v-if条件判断
1. v-if指令简介
-
v-if指令是会根据表达式值的真假，切换元素的显示和隐藏，其实是在操作dom元素。 -
v-if和js里的if差不多，也是会有v-else-if和v-else，js里的if判断是用于在js语法里面的判断，v-if在vue中是对于代码块的判断。
如以下代码
<p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p>
当指令的判断
isShow为true时，p标签则会生成，进而在页面中显示出来，反之在编译时不会生成p标签。
2.代码演示1
html、js 代码如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>v-if指令</title>
</head>
<body>
<div id="app">
<input type="button" value="点我切换显示" @click="changeIsShow" />
<p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
changeIsShow(){
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>
运行结果
image
3.代码演示2
在元素 和 template 中使用 v-if 指令：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试举例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>程序员必备小知识</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈， 程序员打字辛苦！！！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
</html>
这里，
v-if指令将根据表达式seen的值(true或false)来决定是否插入p元素。
运行结果：
image.png
4.总结
-
v-if指令的作用：根据表达式的真假切换元素的显示状态 - 本质是通过操纵
dom元素来进行切换显示 - 表达式的值为
true的时候元素存在于dom树中，为false的时候从dom树中移除
5. 写在后面
关注我，更多内容持续输出
🌹 喜欢就点个赞吧👍🌹
🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹
🌹欢迎大家留言交流，批评指正，
转发请注明出处，谢谢支持！🌹
网友评论