VUE 動態切換列表active樣式

參考VUE官方文檔樣式綁定 https://cn.vuejs.org/v2/guide/class-and-style.html

需求是動態加載出來了所有菜單列表，點擊其中一個li元素改變這個元素的背景色

用到VUE樣式綁定對象語法

<div v-bind:class="{ active: isActive }"></div>

如果 isActive 的布爾值為 true 則樣式渲染，如果為false 樣式不渲染

<li class="list-group-item"  v-for="(item,index) in menuItems" :key="item.index" @click="addClass(index)" :class="{'active':position === index}">{{item}}</li>  // 這里的 position === index為一個判斷條件

1、先把position定義為空

2、點擊事件生效的時候position賦值給index

3、如果要去除這個 active 樣式的話，也就只要使 isActive 為false

完美解決