uView中折叠面板uni-collapse-item如何用改变值的方式切换展开和收起

在uView UI库中，`uni-collapse-item` 是用于创建折叠面板组件的一部分，它允许你展示或隐藏内容。如果你想通过改变某个值来控制其展开和收起状态，你可以按照以下步骤操作：

1. 首先，在数据层，为你的折叠项维护一个布尔值，比如 `isExpanded`，表示当前的状态是展开还是收起。初始设置为 `false`（默认收起）。

data() {
  return {
    isExpanded: false,
    // 其他数据...
  }
}

2. 创建 `v-model` 绑定到这个布尔值，这样每次值变化都会影响组件的显示状态。

<template>
  <uni-collapse-item v-model="isExpanded">
    <!-- 折叠面板的内容 -->
    <view slot="title">标题</view>
    <view slot="content" v-if="isExpanded">展开内容</view>
    <view slot="content" v-else>收起内容</view>
  </uni-collapse-item>
</template>

3. 当你需要切换状态时，可以调用一个方法（例如 `toggleCollapse`），更新 `isExpanded` 的值，并可能关联一些其他业务逻辑。

methods: {
  toggleCollapse() {
    this.isExpanded = !this.isExpanded;
    // 如果需要触发自定义事件，这里可以添加
    // this.$emit('collapse-change', { isExpanded: this.isExpanded });
  },
}

4. 为了实时切换，你可以在按钮点击或者其他相关的事件上绑定 `toggleCollapse` 函数。

<button @click="toggleCollapse">切换</button>