vue实现a标签点击高亮方法

时间:2021-05-26

如下所示:

<!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="external nofollow" 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>

以上这篇vue实现a标签点击高亮方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章