vue实现a标签点击高亮

<! DOCTYPE html >

< html lang = "en" >

< head >

< title ></ title >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

<!--<link href="css/style.css" rel="stylesheet">-->

< script src = "js/jquery.js" > < / script >

< script src = "js/vue(2.0).js" > < / script >

< style lang = "less" rel = "stylesheet/less" >

.a {

display : block ;

float : left ;

margin-left : 20px ;

}

.active {

color : red ;

font-size : 17px ;

}

< / style >

</ head >

< body >

< div id = "app" >

< a class = "s-bt" @ click = "selected(Aname.name)" : class = "{active: active == Aname.name}" v-for = "Aname in Alist" > {{Aname.name}} </ a >

</ div >

< script >

new Vue ({

el : '#app' ,

data : {

Alist : [{

name : '影视大咖'

}, {

name : '女明星'

}, {

name : '男明星'

}, {

name : '商业大亨'

}],

active : ''

},

mounted () {

},

methods : {

selected ( name ) {

this . active = name;

}

}

})

< / script >

</ body >

</ html >