vue实现a标签点击高亮方法
程序员文章站
2022-05-20 23:33:45
如下所示：
...</div>
<div class="content">
<p><span style="background-color: #ccffcc"><strong>如下所示：</strong></span></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!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></pre>
</div>
<p>以上这篇vue实现a标签点击高亮方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1072912.html">
足球贴图最快的方法图文介绍 </a>
</p>
<p>
下一篇： <a href="/article/1072914.html">
Vue 实现双向绑定的四种方法 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2137020.html" target="_blank" title="用Kotlin实现Android点击事件的方法">
<h2>
用Kotlin实现Android点击事件的方法 </h2>
</a>
</li>
<li>
<a href="/article/2135603.html" target="_blank" title="Vue用v-for给循环标签自身属性添加属性值的方法">
<h2>
Vue用v-for给循环标签自身属性添加属性值的方法 </h2>
</a>
</li>
<li>
<a href="/article/2135604.html" target="_blank" title="vue2.0页面前进刷新回退不刷新的实现方法">
<h2>
vue2.0页面前进刷新回退不刷新的实现方法 </h2>
</a>
</li>
<li>
<a href="/article/2135594.html" target="_blank" title="vue+echarts实现动态绘制图表及异步加载数据的方法">
<h2>
vue+echarts实现动态绘制图表及异步加载数据的方法 </h2>
</a>
</li>
<li>
<a href="/article/2135248.html" target="_blank" title="vue实现打印功能的两种方法">
<h2>
vue实现打印功能的两种方法 </h2>
</a>
</li>
<li>
<a href="/article/2135281.html" target="_blank" title="Vue2.0 给Tab标签页和页面切换过渡添加样式的方法">
<h2>
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法 </h2>
</a>
</li>
<li>
<a href="/article/2135031.html" target="_blank" title="vue2.0项目实现路由跳转的方法详解">
<h2>
vue2.0项目实现路由跳转的方法详解 </h2>
</a>
</li>
<li>
<a href="/article/2134996.html" target="_blank" title="vue.js实现标签页切换效果">
<h2>
vue.js实现标签页切换效果 </h2>
</a>
</li>
<li>
<a href="/article/2134972.html" target="_blank" title="Vue 样式绑定的实现方法">
<h2>
Vue 样式绑定的实现方法 </h2>
</a>
</li>
<li>
<a href="/article/2130923.html" target="_blank" title="实现点击下箭头变上箭头来回切换的两种方法【推荐】">
<h2>
实现点击下箭头变上箭头来回切换的两种方法【推荐】 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>