在Vue.js中,常用的UI組件庫之一是iView。iView中的Tab組件能夠有效地幫助用戶組織和管理頁面布局和內容,而且還有很多實用的功能。
使用iView中的Tab組件,我們需要先安裝iView組件庫或者在index.html中引入iView的cdn鏈接。接著,我們可以使用以下代碼來創建一個具有三個標簽頁的Tab組件:
<template>
<div>
<i-tabs v-model="tabIndex">
<i-tab-pane label="Tab 1">
Tab 1
</i-tab-pane>
<i-tab-pane label="Tab 2">
Tab 2
</i-tab-pane>
<i-tab-pane label="Tab 3">
Tab 3
</i-tab-pane>
</i-tabs>
</div>
</template>
<script>
export default {
data() {
return {
tabIndex: "1"
};
}
};
</script>
在上述代碼中,我們通過i-tabs來創建Tab組件,并通過v-model綁定tabIndex來控制當前顯示的標簽頁。i-tab-pane用于創建標簽頁,label屬性用于設置標簽頁的標題,標簽頁的內容可以直接寫在i-tab-pane標簽內部。
iView的Tab組件還支持很多其他的特性和功能,比如滾動條、關閉、禁用標簽頁等。如果有需要,我們可以在官方文檔中查看更多詳細的使用方法和API。
上一篇idea vue高亮
下一篇css3 什么時候出現的