如下所示:
<!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="external nofollow" 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>
以上这篇vue实现a标签点击高亮方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持菜鸟教程(cainiaojc.com)。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。