vue元素显示隐藏 v-if 和 v-show 指令
v-if 和 v-show在vue中,v-if 和 v-show 会根据接收true/false信息使得页面上元素达到显示或隐藏的效果。语法:<标签 v-if="true/false"></标签><标签 v-show="true/false"></标签><!--true:显示false:隐藏-->12345原理:v-if:通过创建、销毁d
·
v-if 和 v-show
在vue中,v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果。
语法
:
<标签 v-if="true/false"></标签>
<标签 v-show="true/false"></标签>
<!--true:显示 false:隐藏-->
- 1
- 2
- 3
- 4
- 5
原理
:
-
v-if:通过 创建、销毁 dom元素的方式达到显示、隐藏效果(销毁后有一个占位符 )。
-
v-show:通过css控制样式style达成显示、隐藏效果。
- display:none; 隐藏
- display:block; 显示
特点
:
v-if 有更高的切换消耗 ,如果运行条件不大可能改变,则v-if 较合适。
v-show有更高的渲染消耗,如果需要频繁切换,则v-show 较合适。
注意
:
v-if使得元素被隐藏后,这个元素的物理位置有一个名称为<!---->
的占位符,其与html的注释信息没有关系。
案例
:
通过按钮控制,使得元素内容在显示和隐藏之间切换:
<style>
#one{width: 300px;height: 40px;background-color:orange;}
#two{width: 300px;height: 40px;background-color:lightgreen;}
</style>
</head>
<body>
<div id="app">
<h2>v-if和v-show</h2>
<button @click="flag=!flag">切换</button>
<p id="one" v-if="flag">vue指令--v-if</p>
<p id="two" v-show="flag">vue指令--v-show</p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:false // 控制标签是否显示true/false
},
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
注意
:
事件驱动不仅可以是methods方法,也可以是简单的js语句。
v-if 和 v-else
在Vue中,v-if 、v-else-if 和 v-else 三个指令结合可以实现多路分支结构。
- v-if 可以单独使用,形成单路分支结构。
- v-if 和 v-else 可以合作使用,实现双路分支结构。
- v-if 、v-else-if 和 v-else 可以合作使用,实现多路分支结构。
语法
:
<标签 v-if="true/false"></标签>
<标签 v-else-if="true/false"></标签>
<标签 v-else-if="true/false"></标签>
<标签 v-else></标签>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意
:
以上4个标签分支结构,最终只会走一个,第一个为true的那个标签会执行 或 执行v-else。
案例应用
:
判断品牌信息是否存在,并显示对应内容
<table v-if="brandList.length>0">
……
</table>
<table v-else>
<tr><td>没有任何记录!</td></tr>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
注意
:
v-if 和v-else 一并使用,页面没有<!---->
占位符了。
更多推荐
所有评论(0)