el-collapse v-model
时间: 2024-10-12 14:01:12 浏览: 26
在vue中使用el-tab-pane v-show/v-if无效的解决
5星 · 资源好评率100%
`el-collapse` 是 Element UI 中的一个组件,它是一个折叠面板,常用于展示内容列表,并可以切换显示或隐藏其中的内容。`v-model` 是 Vue.js 的核心指令之一,用于数据绑定和响应式系统,这里作为 `el-collapse` 的绑定属性,用于控制折叠面板的状态。
当你在 `el-collapse` 上使用 `v-model` 指令时,你可以通过设置它的值来控制展开状态。当 `v-model` 的值为 `true` 或者非空字符串时,折叠面板会打开;当值为 `false` 或空字符串时,折叠面板会关闭。例如:
```html
<el-collapse v-model="isCollapsed">
<el-collapse-item title="标题 1">内容 1</el-collapse-item>
<el-collapse-item title="标题 2">内容 2</el-collapse-item>
</el-collapse>
```
在这个例子中,`isCollapsed` 数据决定了所有折叠项是否默认展开。如果 `isCollapsed` 为 `true`,则所有项初始状态下都是折叠状态。
阅读全文