今天給大家分享一下本人經常用到的tab切換功能。主要邏輯就是資料的新增和刪除並且判斷樣式。廢話不多說直接上**
技術棧div
>
style
="margin-left
: 25px;
" class
="tab"
>
v-for
="(item,index) in data"
:key
="index"
@click
="overlayselected(item,index)"
:class=""
>
}span
>
div>
div>
class
="title"
>
v-for
="(item,index) in selectlist"
:key
="index"
style
="margin-right
: 20px;
position
: relative;
" >
style
="padding
: 6px 18px;
border-radius
: 6px;
border
: 2px solid #4395ff;
color
: #4395ff;
" >
}div
>
class
="delete"
@click
="deletedata(item,index)"
>
xspan
>
div>
div>
div>
template
>
Vue 實現tab切換
v bind 三元 v for item,index in tabs class click tab index 先使用v for把資料遍歷渲染到頁面上，v for中有乙個index表示索引，將index作為引數傳入到tab index 這個函式中，在data中定義乙個num變數，在title中如果...
頁面Tab切點選切換
tab head tab head a tab head bg tab head bg img html部分 tab1 tab1 tab1 tab2 tab2 tab2 tab3 tab3 tab3 tab4 tab4 tab4 js部分 function tab2 click function t...
Vue實現tab標題切換例項
方法 一 html部分布局 html部分 如下所示 標題二標題三 標題四 內容一 內容二內容三 內容四給選中部分加css樣式 css部分 如下所示 li.hx activity引入vue.js實現效果 js部分 如下所示 new vue 方法 二 menulist for item,index in...