Vue.js implements tab switching and color change operation explanation

<template>
<div >
     //tab page switch button part <ul>
        <li v-for="(item,index) in navList" :class = "{active:!(index- 
            menuIndex)}" @click = 'menuShow(index)'>
          <a href="#" rel="external nofollow" >{{item}}</a>
        </li>
      </ul>
 
   //Content body <div v-show = 'menuIndex == 0'> Content 1 <!-- This can be replaced with a subcomponent--></div>
   <div v-show = 'menuIndex == 1'>Content 2<!--You can replace it with a subcomponent here--></div>
</div>
</template>
 
<script type="text/javascript">
export default {
data(){
      return {
         menuIndex:0,
        navList:['Middleware Details', 'Deployment Architecture'],
      }
            }
   methods: {
      menuShow (index) {
        this.menuIndex = index
        console.log(this.menuIndex)
      }
}
</script>
//Style <style scoped>
//Click to switch the color, I set it to blue.active{
    background-color: rgba(13, 175, 255, 0.33);
    }
<style>

.active{
//background color background-color: rgba(13, 175, 255, 0.33);
//font color: red;
  }