Vant?UI中van-collapse下拉折叠面板默认展开 项的方法

Vant UI中的van-collapse下拉折叠面板默认展开 项的方法可以通过给van-collapse设置v-model来实现，默认情况下v-model的值为null，即所有的面板都是折叠状态，设置v-model的值为数组[0]，即可使 个面板展开。

下面是一个简单的例子：

<template>
  <div>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="面板一" name="1">
        <p>这是面板一的内容</p>
      </van-collapse-item>
      <van-collapse-item title="面板二" name="2">
        <p>这是面板二的内容</p>
      </van-collapse-item>
      <van-collapse-item title="面板三" name="3">
        <p>这是面板三的内容</p>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [0]
    }
  }
}
</script>

在上面的代码中，我们在data中初始化了activeNames的值为[0]。这意味着默认情况下 个面板会被展开。我们将这个数组传递给van-collapse的v-model属性，使其与activeNames绑定。这样一来，只要我们修改activeNames的值，面板的展开状态就会发生相应的变化。

除了使用数组[0]来让 个面板展开，我们还可以使用字符串"1"来达到同样的效果，如下：

<van-collapse v-model="activeNames">
  <van-collapse-item title="面板一" name="1">
    <p>这是面板一的内容</p>
  </van-collapse-item>
  <van-collapse-item title="面板二" name="2">
    <p>这是面板二的内容</p>
  </van-collapse-item>
  <van-collapse-item title="面板三" name="3">
    <p>这是面板三的内容</p>
  </van-collapse-item>
</van-collapse>

<script>
export default {
  data() {
    return {
      activeNames: ["1"]
    }
  }
}
</script>

这个例子和上一个例子实现的效果是一样的，只是使用了不同的值。