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 控制弹出窗口
Apr 10 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 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
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
python发送HTTP请求的方法小结
2015/07/08 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
高效课堂标语
2014/06/26 职场文书
财会专业大学生求职信
2014/09/26 职场文书
黄山导游词
2015/01/31 职场文书
技术员岗位职责范本
2015/04/11 职场文书
志愿者工作心得体会
2016/01/15 职场文书
Python合并pdf文件的工具
2021/07/01 Python
SQL Server内存机制浅探
2022/04/06 SQL Server