使用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>

It's done. 很是簡潔的代碼就實現了選中高亮。View on jsfiddle