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爲一個判斷條件

一、先把position定義爲空

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

三、若是要去除這個 active 樣式的話，也就只要使 isActive 爲false

完美解決