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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
js查错流程归纳
May 04 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
angular简介和其特点介绍
Jan 29 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 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使之能同时支持GIF和JPEG
2006/10/09 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
React组件refs的使用详解
2018/02/09 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
家长对孩子的感言
2014/03/10 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
助残日活动总结
2014/08/27 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
寒山寺导游词
2015/02/03 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
世界十大狙击步枪排行榜
2022/03/20 杂记
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL