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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
js对象的比较
Feb 26 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
python绘图库Matplotlib的安装
2014/07/03 Python
Python常用列表数据结构小结
2014/08/06 Python
django主动抛出403异常的方法详解
2019/01/04 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python requests模块cookie实例解析
2020/04/14 Python
python接口自动化框架实战
2020/12/23 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
保护环境标语
2014/06/09 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
合理化建议书范文
2015/09/14 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
MySQL七大JOIN的具体使用
2022/02/28 MySQL