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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
javascript之Partial Application学习
Jan 10 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
JS document form表单元素操作完整示例
Jan 13 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
php查询whois信息的方法
2015/06/08 PHP
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python日期时间对象转换为字符串的实例
2018/06/22 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
高中毕业自我鉴定
2013/12/19 职场文书
道德模范先进事迹
2014/02/14 职场文书
代理协议书
2014/04/22 职场文书
自主招生专家推荐信
2015/03/26 职场文书
小学生暑假生活总结
2015/07/13 职场文书
学校学期工作总结
2015/08/13 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
Python Matplotlib库实现画局部图
2021/11/17 Python
Django框架中表单的用法
2022/06/10 Python