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 相关文章推荐
jQuery插件 tabBox实现代码
Feb 09 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
js 求时间差的实现代码
Apr 26 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
js实现计算器功能
Aug 10 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
Vue实现简易计算器
2020/02/25 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python的常见命令注入威胁
2013/02/18 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
详解Python正则表达式re模块
2019/03/19 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL