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 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
详解AngularJS之$window窗口对象
Jan 17 Javascript
JS实现可视化音频效果的实例代码
Jan 16 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
2006/12/13 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python实现简单http服务器功能
2018/09/17 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python3监控疫情的完整代码
2020/02/20 Python
深入分析python 排序
2020/08/24 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
小组口号大全
2014/06/09 职场文书
片区教研活动总结
2014/07/02 职场文书
教师党员自我评价2015
2015/03/04 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
党支部工作总结2015
2015/04/01 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android