使用Vue.js实现列表选中效果

html
<div id="app">

  <div class="collection">

    <a href="#!" class="collection-item"

       v-for="gameName in gameNames"

       :class="{active: activeName == gameName}"

       @click="selected(gameName)">{{gameName}}</a>

  </div>

</div

 
JS


new Vue({

  el: "#app",

  data: {

    gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',

      '守望先锋'

    ],

    activeName: ''

  },

  methods: {

    selected: function(gameName) {

      this.activeName = gameName

    }

  }

})