Vue实现点击导航栏当前标签后变色功能

本文实例为大家分享了Vue实现点击导航栏当前标签后变色的具体代码，供大家参考，具体内容如下

效果图

实现

这个功能，借助一个切换标识，当与各标签项 index 对应时切换 css。

HTML：

1. <template>
2. <div class="nav">
3.  
4. <!-- 点击切换变色导航栏 -->
5. <ul>
6. <li
7. v-for="(item,index) in nav"
8. :class="{ active: index == current }"
9. @click="go(index)">
10. {{ item }}
11. </li>
12. </ul>
13. <!-- END -->
14.  
15. </div>
16. </template>

JavaScript：

1. <script>
2.  
3. export default {
4.  
5. data(){
6. return {
7. current: 0,//切换标识
8. nav: [//导航栏数据
9. '首页',
10. '新闻中心',
11. '要闻资讯',
12. '联系我们'
13. ]
14. }
15. },
16.  
17. methods: {
18.  
19. // 导航栏切换
20. go(index) {
21. this.current = index//激活样式
22. }
23.  
24. }
25. }
26.  
27. </script>

CSS：

1. <style>
2.  
3. /*点击切换变色导航栏*/
4. ul li {
5. list-style: none;
6. float: left;
7. margin-right: 20px;
8. padding:10px;
9. }
10. .active{/*激活样式*/
11. color: red;
12. }
13.  
14. </style>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原文链接：https://blog.csdn.net/weixin_44198965/article/details/108060684