使用Vue.js實現列表選中效果

 實際項目中，我們會遇到很多類似的需求，一個列表，需要點擊其中一條高亮顯示。熟悉JQuery的同學說這個太簡單了。可以給這個選中的element設置一個active的class。配合Css樣式，讓active有選中高亮效果。但是誰說一定要用到jQuery呢。

  最近在做的項目中，我嘗試脫離JQuery，繞過JQuery，我所接觸的大部分項目中好像不使用JQuery無法進行開發一樣。它確實給開發者提供了太多便利。以至於大部分web網站都依賴它運行着。據w3Techs統計，JQuery的市場份額高達94.9%，是時候脫離JQuery的束縛了。使用Vue.js更簡潔，快速地實現。

  選中效果實現的核心實現邏輯是拷貝一份當前狀態作為快照。比對列表的快照和當前的唯一索引，如果相同則視為選中。

Demo

---

使用Vue.js實現

---

javascript

new Vue({ el: "#app", data: { gameNames: ['魔獸世界', '暗黑破壞神Ⅲ', '星際爭霸Ⅱ', '爐石傳說', '風暴英雄', '守望先鋒' ], activeName: '' }, methods: { selected: function(gameName) { this.activeName = gameName } } })

html

 

<div id="app"> <div class="collection"> <a href="#!" class="collection-item" v-for="gameName in gameNames" @click="selected(gameName)" :class="{active: activeName == gameName}">{{gameName}}</a> </div> </div>