Using Vue.js to implement list selection effects

In the actual project, we will encounter a lot of similar needs, a list, need to click on one of the highlighted. The students who are familiar with jquery say this is too easy. You can set an active class for this selected element. With CSS style, let active have the highlight effect selected. But who says it must use jquery.

In my recent project, I tried to get out of jquery, bypassing jquery, and most of the projects I contacted seemed not to be developed with jquery. It does offer developers too much convenience. That most Web sites rely on it to run. According to W3techs, the market share of jquery is as high as 94.9%, and it is time to get out of the shackles of jquery. Use it Vue.js more concisely and quickly.

The core implementation logic for the selected effect is to copy a current state as a snapshot. A snapshot of the comparison list and the current unique index, if the same is considered selected.

Demo

Using the Vue.js implementation

Javascript

new Vue({  el: "#app",  data: {    gameNames: [‘魔兽世界‘, ‘暗黑破坏神Ⅲ‘, ‘星际争霸Ⅱ‘, ‘炉石传说‘, ‘风暴英雄‘, ‘守望先锋‘ ], activeName: ‘‘ }, methods: { selected: function(gameName) { this.activeName = gameName } }})

Html

<Divid= "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>     

Use Vue.js to implement list selection effects