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


Posted in Javascript onMarch 17, 2018

如下所示:

<!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标签点击高亮方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
vue如何从接口请求数据
Jun 22 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 #Javascript
Vue 实现双向绑定的四种方法
Mar 16 #Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 #Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 #Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 #Javascript
vue-router相关基础知识及工作原理
Mar 16 #Javascript
axios post提交formdata的实例
Mar 16 #Javascript
You might like
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
vue中使用codemirror的实例详解
2018/11/01 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python中turtle库的使用实例
2019/09/09 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
英语文学专业学生的自我评价
2013/10/31 职场文书
公司前台接待岗位职责
2013/12/03 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
大型活动策划方案
2014/01/12 职场文书
运输服务质量承诺书
2014/03/27 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
节能宣传周活动总结
2014/05/08 职场文书
社团活动总结模板
2014/06/30 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python