Cambie dinámicamente el estilo en vue (evento de clic: la forma clásica de escribir la barra de navegación)

 vue中数据的更新可以导致页面的重构，因此提供了一种导航栏的新思路。

<!-- 导航 -->
template:
                <div class="nav_bar">
                  <span v-for="(item,i) in navigationBar" :key="i" 
                  :class="item.type == navHeader ? 'spanItem' : '' "
                  @click="_changeHeader(item)">
                    {
    
    {
    
    item.title}}
                  </span>
                </div>
data:

data() {
    
    
    return {
    
    
      navigationBar: [
        {
    
    title:"综合能力",type:"zonghe"},
        {
    
    title:"软件能力",type:"ruanjian"},
        {
    
    title:"业务能力",type:"yewu"},
        {
    
    title:"技能能力",type:"jineng"},
        {
    
    title:"文化能力",type:"wenhua"},
        {
    
    title:"爱好能力",type:"aihao"}
      ],
      navHeader: "zonghe"
    };
  },
 methods:
 
 methods: {
    
    
    _changeHeader(item) {
    
    
      this.navHeader = item.type
      //FIXME:此处进行判断进行一个 路由跳转
    }
  },
style:

.spanItem {
    
    
            width: 16.666%;
            height: 34px;
            text-align: center;
            line-height: 34px;
            margin-top: -3px;
            background: linear-gradient(-26deg, #56b1ff, #48fffd);
            border-radius: 20px;
            font-size: 20px;
            font-family: AliHYAiHei;
            font-weight: 400;
            font-style: italic;
            color: #ffffff;
            text-shadow: 0px 1px 3px rgba(9, 26, 41, 0.32);
          }