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的拖动布局插件
Nov 25 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP实现文件下载【实例分享】
2017/04/28 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
js常用排序实现代码
2010/12/28 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python处理Excel文件实例代码
2017/06/20 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python聊天室程序(基础版)
2018/04/01 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python+logging+yaml实现日志分割
2019/07/22 Python
python实现密码强度校验
2020/03/18 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
甜美蛋糕店创业计划书
2014/01/30 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
创先争优标语
2014/06/27 职场文书
股份合作协议书
2014/09/10 职场文书
丧事答谢词大全
2015/09/30 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
mysql 索引合并的使用
2021/08/30 MySQL