Vue指令之v-if

最新推荐文章于 2024-05-15 18:27:31 发布

卡卡西Sensei

最新推荐文章于 2024-05-15 18:27:31 发布

阅读量2.2w

点赞数 3

分类专栏： # Vue指令 web前端 # Vue 文章标签： Vue指令 v-if

本文链接：https://blog.csdn.net/zjpjay/article/details/109815144

版权

web前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

Vue

12 篇文章 2 订阅

订阅专栏

Vue指令

7 篇文章 5 订阅

订阅专栏

Vue指令之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标签。

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>

2.运行结果

3.总结

v-if指令的作用：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来进行切换显示
表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除

卡卡西Sensei

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue指令之v-if

Vue指令之v-ifv-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标签则会生成，进而在页面中显示出来，反之在编...
复制链接

扫一扫