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中cookie的使用详细分析
May 28 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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防止伪造的数据从URL提交方法
2014/06/27 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
理解javascript封装
2016/02/23 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
python爬虫headers设置后无效的解决方法
2017/10/21 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
个人培训自我鉴定
2014/03/28 职场文书
教师节活动主持词
2014/04/02 职场文书
师恩难忘教学反思
2014/04/27 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书