vue 实现展开折叠效果
在Vue中实现展开折叠效果,可以使用v-if
或v-show
指令来根据一个变量的值显示或隐藏内容。以下是一个简单的示例:
<template>
<div>
<button @click="toggle">Toggle</button>
<div v-if="isExpanded">
这里是可展开的内容。
</div>
</div>
</template>
<script>
export default {
data() {
return {
isExpanded: false,
};
},
methods: {
toggle() {
this.isExpanded = !this.isExpanded;
},
},
};
</script>
在这个例子中,我们有一个名为isExpanded
的数据属性,它用于控制内容的显示与隐藏。通过点击按钮触发toggle
方法,该方法会切换isExpanded
的布尔值,从而实现内容的展开和折叠。
评论已关闭