vue選択効果を実現
3327 ワード
<li v-for="(item,index) in itemData " :key="index">
<el-button
v-bind:class="{
active:item.id==link}"
type="text"
icon="el-icon-folder"
@click="getDiary(item)"
>{{item.title}}</el-button>
</li>
選択した部分を実装
v-bind:class="{active:item.id==link}"
css
.active {
color: #409eff;
}
data
data () {
return {
link: '' //
}
}
methods
getDiary(item){
this.link = item.id
}
Active:選択したcss属性名itemをカスタマイズする.id:この例では、各ループのid link:グローバル定義で選択するオプション
実装構想各リストオプションをクリックすると、グローバル変数linkに一意のidを割り当てるcssスタイルにlink=現在のオプションのidを追加する条件を選択します.