目录一、控制元素显示隐藏的方法1. v-if 和 v-else 指令2. 切换元素的CSS display属性3. opacity属性4. visibility属性5. width和
提示:以下是本篇文章正文内容,下面案例可供参考
<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 就好了
到此这篇关于Vue 控制元素显示隐藏的方法和区别的文章就介绍到这了,更多相关Vue 控制元素显示隐藏内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 使用Vue 控制元素显示隐藏的方法和区别
本文链接: https://www.lsjlt.com/news/174470.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0