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を追加する条件を選択します.