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标
·
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.运行结果
![](https://i-blog.csdnimg.cn/blog_migrate/0ff2fcb55da81e9183b6ce8d0e1dcfcd.gif)
3.总结
- v-if指令的作用:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来进行切换显示
- 表达式的值为true的时候元素存在于dom树中,为false的时候从dom树中移除
更多推荐
所有评论(0)