<el-tabs动态v-model
时间: 2024-06-16 08:08:47 浏览: 137
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
5星 · 资源好评率100%
<el-tabs> 是 Element UI 中的一个组件,用于创建标签页。动态 v-model 是指可以通过改变 v-model 的值来动态切换标签页。
在使用 <el-tabs> 组件时,可以通过 v-model 绑定一个变量来实现动态切换标签页。当 v-model 的值改变时,<el-tabs> 会自动切换到对应的标签页。
以下是使用 <el-tabs> 动态切换标签页的示例代码:
```html
<template>
<div>
<el-tabs v-model="activeTab">
<el-tab-pane label="标签页1" name="tab1">内容1</el-tab-pane>
<el-tab-pane label="标签页2" name="tab2">内容2</el-tab-pane>
<el-tab-pane label="标签页3" name="tab3">内容3</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1' // 初始选中的标签页
};
}
};
</script>
```
在上述代码中,通过 v-model 绑定了一个名为 activeTab 的变量,初始值为 'tab1'。当 activeTab 的值改变时,<el-tabs> 会自动切换到对应的标签页。
阅读全文