vue导航点击切换 2.0

HTML：

<ul>
    <li @click=" changeNav( 1 )" 
         :class="{ act: Index ==1 }"
          >
          NAV1   
               </li>
     <li @click="changeNav(2)"
         :class="{act: Index == 2 }"
         >
        NAV2 
             </li>
<li @click="changeNav(3)"
     :class="{ act: Index == 3}">
      NAV3 
            </li>                    
</ul>

JS:

export default {
        data() {
                return {
                        Index: 1,
                };
        },

 methods: {
                changeNav(index) {
                        if (index == 1) {
                                this.Index = 1;
                        } else if (index == 2) {
                                this.Index = 2;
                        } else if (index == 3) {
                                this.Index = 3;
                },
        },

CSS: 略 

（act 为点击后改变的class名）

其他：搭配v-if使用

v-if="Index == 1"

参考：https://www.jb51.net/article/160881.htm

相似：https://www.cnblogs.com/jiangze-blog/p/8075498.html