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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM