提示：前端查漏补缺，仅代表个人观点，不接受任何批评

文章目录

• 一、控制元素显示隐藏的方法
• • 1. `v-if` 和 `v-else` 指令
  • 2. 切换元素的CSS display属性
  • 3. opacity属性
  • 4. visibility属性
  • 5. width和height属性 （不建议使用）
• 二、区别
• 三. 注意事项

提示：以下是本篇文章正文内容，下面案例可供参考

一、控制元素显示隐藏的方法

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.

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！