uniapp实现展开收起功能
时间: 2023-07-24 08:20:12 浏览: 333
小程序实现展开/收起的效果示例
可以使用`v-if`或`v-show`指令来实现展开收起功能。
1. 使用`v-if`指令
```
<template>
<div>
<div v-if="showContent">
<!-- 显示的内容 -->
</div>
<button @click="showContent = !showContent">{{showContent ? '收起' : '展开'}}</button>
</div>
</template>
<script>
export default {
data() {
return {
showContent: false
}
}
}
</script>
```
2. 使用`v-show`指令
```
<template>
<div>
<div v-show="showContent">
<!-- 显示的内容 -->
</div>
<button @click="showContent = !showContent">{{showContent ? '收起' : '展开'}}</button>
</div>
</template>
<script>
export default {
data() {
return {
showContent: false
}
}
}
</script>
```
两种方法的区别在于`v-if`会在`showContent`为`false`时将对应的DOM元素删除,而`v-show`只是将DOM元素隐藏。因此,如果需要频繁切换展开收起状态,建议使用`v-show`,避免频繁创建和删除DOM元素导致性能问题。
阅读全文