使用Vue 控制元素显示隐藏的方法和区别
短信预约 -IT技能 免费直播动态提醒
提示：以下是本篇文章正文内容，下面案例可供参考
一、控制元素显示隐藏的方法
1. v-if 和 v-else 指令
- 单独使用 v-if，满足条件显示，反之隐藏
<template>
<div v-if="a > 10">
Demo show
</div>
</template>
<script>
export default {
data() {
return {
a:18
}
}
}
</script>
// 页面显示内容
Demo show- v-if 和 v-else 一起使用，满足v-if中的条件就显示有v-if判断中的代码内容，反之则显示 v-else中的内容
<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;2. 切换元素的CSS display属性
- 用
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>3. opacity属性
<template>
<div class="hide">
block A;
</div>
</template>
<style>
.hide{
opacity: 0;
}
</style>4. visibility属性
<template>
<div class="hide">
block A;
</div>
</template>
<style>
.hide{
visibility: hidden; //隐藏
visibility: visible; //显示
}
</style>5. width和height属性 （不建议使用）
<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元素依旧还在，在网页中该占的位置还是占着.
三. 注意事项
- 有v-if的地方不一定有v-else，有v-else同级元素中必有v-if;
- v-if和v-else配合使用必须在同一级，不能存在不同级;
// 正确示例
<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-if有更高的
切换消耗； - v-show有更高的
初始渲染消耗； - 如果需要
频繁切换则用v-show，反之则用v-if.
补充知识点：
vue 控制元素的显示和隐藏
方法：
- 使用 v-if 指令，通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素；
- 使用 v-show 指令，通过设置DOM元素的display样式属性来控制显隐。
v-if 指令与 v-show 指令都可以根据值动态控制DOM元素显示隐藏，
v-if 和 v-show 属于Vue的内部常用的指令，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。
v-if 会直接删除元素v-show 只是隐藏，只是简单地切换元素的 CSS 属性display。
v-show 示例：
比如想要 隐藏 下面这个 按钮 那么给这个 div 加一个 v-show 的属性，名字我写的showButton，
<div v-show="showButton">
<Button>按钮</Button>
</div>然后在 js 代码中 设置 showButton 的默认值为 false ，就是刚启动的时候，默认是不显示的，
后面如果想要 显示 这个 按钮 ，就直接设置 showButton 为 true 就好了
到此这篇关于Vue 控制元素显示隐藏的方法和区别的文章就介绍到这了,更多相关Vue 控制元素显示隐藏内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
