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 实用函数的使用详解
May 10 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
前端面试知识点目录一览
Apr 15 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
js实现星星海特效的示例
Sep 28 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 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采集利器 Snoopy 试用心得
2011/07/03 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
python批量制作雷达图的实现方法
2016/07/26 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
师范大学毕业自我鉴定
2013/11/21 职场文书
煤矿班组长的职责
2013/12/25 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
服务理念口号
2014/06/11 职场文书
健康状况证明模板
2014/10/23 职场文书
小学班长竞选稿
2015/11/20 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏