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 相关文章推荐
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
React简单介绍
May 24 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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 rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
挂职思想汇报
2013/12/31 职场文书
上课玩手机检讨书
2014/02/08 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
摄影展策划方案
2014/06/02 职场文书
学校搬迁方案
2014/06/15 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2016教师节问候语
2015/11/10 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript