提示:以下是本篇文章正文内容,下面案例可供参考
<template> <div v-if="a > 10"> Demo show </div> </template> <script> export default { data() { return { a:18 } } } </script> // 页面显示内容 Demo show
<template> <div v-if="a > 20"> block A; </div> <div v-else> block B; </div> </template> <script> export default { data() { return { a: 18 } } } </script> // 页面显示内容 block B;
v-show
指令<template> <div v-show="a>10"> block A; </div> </template> <script> export default { data() { return { a: 18 } } } </script> // 页面显示内容 block A;
display:none
)<template> <div class="hide"> block A; </div> </template> <style> .hide{ display: none; } </style>
<template> <div class="hide"> block A; </div> </template> <style> .hide{ opacity: 0; } </style>
<template> <div class="hide"> block A; </div> </template> <style> .hide{ visibility: hidden; //隐藏 visibility: visible; //显示 } </style>
<template> <div class="hide"> block A; </div> </template> <style> .hide{ width: 0; height: 0; overflow: hidden; //必须要有这个属性才能隐藏 } </style>
v-if
显示隐藏是将dom元素整个添加或删除
;v-show
隐藏是为该元素添加css–display:none,dom元素依旧还在
,但是不占任何的位置;opacity
是将元素的透明度设置为0
, visibility: hidden
是将元素隐藏,dom元素依旧还在,在网页中该占的位置还是占着.// 正确示例 <div> <div v-if="a > 0"> block A; </div> <div v-else> block B; </div> </div> // 错误示例 <div> <div v-if="a > 0"> block A; <div v-else> block B; </div> </div> </div>
切换消耗
;初始渲染消耗
;频繁切换则用v-show
,反之则用v-if.补充知识点:
v-if 指令与 v-show 指令都可以根据值动态控制DOM元素显示隐藏,
v-if 和 v-show 属于Vue的内部常用的指令,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。
v-if 会直接删除元素v-show 只是隐藏,只是简单地切换元素的 CSS 属性display。
比如想要 隐藏 下面这个 按钮 那么给这个 div 加一个 v-show 的属性,名字我写的showButton,
<div v-show="showButton"> <Button>按钮</Button> </div>
然后在 js 代码中 设置 showButton 的默认值为 false ,就是刚启动的时候,默认是不显示的,
后面如果想要 显示 这个 按钮 ,就直接设置 showButton 为 true 就好了