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 简练的几个函数
Aug 29 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
JS装饰器函数用法总结
Apr 21 Javascript
javascript实现前端分页效果
Jun 24 Javascript
js实现批量删除功能
Aug 27 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 进度条函数的简单实例
2017/09/19 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
Python set常用操作函数集锦
2017/11/15 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python读取几个G的csv文件方法
2019/01/07 Python
Django时区详解
2019/07/24 Python
手写一个python迭代器过程详解
2019/08/27 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
校园广播稿100字
2014/10/06 职场文书
人大代表选举标语
2014/10/07 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
导游词之无锡梅园
2019/11/28 职场文书
利用python进行数据加载
2021/06/20 Python
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
Python中Selenium对Cookie的操作方法
2021/07/09 Python
Windows server 2016服务器基本设置
2022/08/14 Servers