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树中移除