vue 实现展开折叠效果

这篇文章距离上次修改已过433天，其中的内容可能已经有所变动。

在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的布尔值，从而实现内容的展开和折叠。

vue 实现展开折叠效果

评论已关闭

推荐阅读