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 相关文章推荐
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 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
我的论坛源代码(二)
2006/10/09 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
探讨php中header的用法详解
2013/06/07 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
如何提高数据访问速度
2016/12/26 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
使用索引有什么好处
2016/07/27 面试题
公司试用期员工自我评价
2014/09/17 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
合作协议书模板
2014/10/10 职场文书
陕西导游词
2015/02/04 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
施工现场安全管理制度
2015/08/05 职场文书
干部外出学习心得体会
2016/01/18 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers