vue实现a标签点击高亮

来源:互联网 发布:历代windows 编辑:程序博客网 时间:2024/06/07 00:25

<!
DOCTYPE html>
<htmllang="en">

<head>
<title></title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1">
<!--<link href="css/style.css" rel="stylesheet">-->
<scriptsrc="js/jquery.js"></script>
<scriptsrc="js/vue(2.0).js"></script>
<stylelang="less"rel="stylesheet/less">
.a {
display:block;
float:left;
margin-left:20px;
}
.active {
color:red;
font-size:17px;
}
</style>
</head>

<body>
<divid="app">
<aclass="s-bt" @click="selected(Aname.name)" :class="{active: active == Aname.name}"v-for="Aname in Alist">{{Aname.name}}</a>
</div>
<script>
newVue({
el:'#app',
data: {
Alist: [{
name:'影视大咖'
}, {
name:'女明星'
}, {
name:'男明星'
}, {
name:'商业大亨'
}],
active:''
},
mounted() {

},
methods: {
selected(name) {
this.active= name;
}
}
})
</script>
</body>

</html>