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 对象和数据的强制更新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了详解关于vue2.0工程发布上线操作步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue鼠标滚轮滚动切换路由效果的实现方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-08
这篇文章主要介绍了利用Vue.js框架实现火车票查询系统的相关资料,，文中给出了详细的介绍与示例代码，并在文章结尾给出了完整的项目下载，需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
本篇文章主要介绍了vue父子组件的嵌套的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue中rem的配置的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue.js 实现点击div标签时改变样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
由于公司要求在内网开发项目,而内网不能连接外网,因此只能离线安装vue环境,下面这篇文章主要给大家介绍了关于离线搭建vue环境运行项目的详细步骤,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了如何在Vue中使用protobuf，protobuf是由google推出的和语言无关和平台无关，几乎支持当前的大部分语言，如JavaScript,下文更多相关介绍需要的小伙伴可以参考一下2022-03-03
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，这篇文章主要介绍了Vue 中 store 基本用法,需要的朋友可以参考下2023-01-01
最新评论