1. 程式人生 > >VUE 動態切換列表active樣式

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

完美解決