vue实现a标签点击高亮方法
更新时间：2018年03月17日 09:08:31 作者：qq_36354609
下面小编就为大家分享一篇vue实现a标签点击高亮方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
<!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标签点击高亮方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何使用vue实现页面访问拦截功能，文中的示例代码讲解详细，具有一定的参考价值，需要的可以了解一下2023-08-08
本文主要介绍了vue中el-table实现自动吸顶效果，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
功能需求——获取后端接口返回的数据，实现列表数据上滑加载更多下一页数据，下拉数据刷新功能，结合vant-ui框架实现。可直接参考使用2022-09-09
本文主要介绍了vue-element-admin下载到登录的一些坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家详细介绍了基于vue.js实现侧边菜单栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue3生命周期原理与生命周期函数,结合简单实例形式分析了vue3的生命周期基本原理、以及各个阶段的生命周期钩子函数功能、使用技巧与相关注意事项,需要的朋友可以参考下2023-04-04
在写vue项目时,有个需求是点击表格中某一行的下载按钮,然后开始下载这一行对应的文件,所以本文小编给大家介绍了使用vue3实现点击按钮下载文件功能,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了如何使用Vue实现简易的车牌输入键盘效果,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解下2023-11-11
本篇文章主要介绍了VueJS如何引入css或者less文件的一些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最近做了个项目需要做数字滚动增加的效果，刚开始接到这个项目还真是懵了，后来发现实现代码很简单的，下面小编给大家带来了vue 实现数字滚动增加效果的实例代码，需要的朋友参考下吧2018-07-07
最新评论