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

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1"> <!--<link href="https://www.jb51.net/css/style.css">--> <script src="https://www.jb51.net/js/jquery.js"></script> <script src="https://www.jb51.net/js/vue(2.0).js"></script> <style lang="less"> .a { display: block; float: left; margin-left: 20px; } .active { color: red; font-size: 17px; } </style> </head> <body> <div> <a @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标签点击高亮方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/pxxzx.html