Vuejs实现列表选中效果

//html
<div id="app">
  <ul><div>选择你最喜欢的爱好：</div>
      <li class="collection-item"
         v-for="gameName in gameNames"
         :class="{active: activeName == gameName}"
         @click="selected(gameName)">{{gameName}}
        </li> 
</ul>
</div>
//js
new Vue({
  el: "#app",
  data: {
    gameNames: ['看书', '听歌', '游泳', '健身', '看电影','旅游'],
    activeName: ''
  },
  methods: {
    selected: function(gameName) {
      this.activeName = gameName
    }
  }
})
//css样式
.active{
  color:red;
}
.collection-item{
  border:1px solid #dadada;
  padding:10px 2px;
  width:98px;
  margin-bottom:5px;
  text-align:center;
}

在线查看效果
https://jsfiddle.net/fozero/npxo3ryq/1/

转载于:https://www.cnblogs.com/fozero/p/6959973.html