从头开始学习vue2.x

阅读此文需要具备基础的前端功底。。。比如说知道v-bind怎么动态更改class，style。知道vue-cli创建的vue项目的目录结构，以及每个vue文件的区域块

之前做安卓，现在做前端。自学vue。不得不吐槽下vue文档是真难读懂。。。。可能是少加标点符号，也可能是vue的文档是面向初级前端的。。。
回归正题，自己在做demo的时候，遇到一些问题。比如，文档与实际写法有一定出入。

vue2.x官方文档例图

在实际项目中可能需要这样写：

实际demo中写法
对，data（）{ return { } }这样的写法。

现在有这样一个场景

请实现这样的效果

导航栏使用的 v-for 语句创建（就是这一串标题都放到一个数组里面给循环出来了）。第0，3，7的字体改变，并且标红，但是并没有，点击鼠标悬浮的背景样式（就是红橙色的样式）。
个人想法是，动态绑定class。使用vue中v-bind方法：:class = "calcFun(index)"之后再computed函数中写上方法。因为没看到文档是传参的操作，困扰了半天，最后搜索到了。具体写法是这样的：

computed传参操作

这样就可以将for循环的index给放入到具体操作的函数中了。具体代码如下：

一部分html布局，动态更改该class

     <!--      左侧导航栏-->
      <div class="sec_left boxShadow">
        <div class="sec_text_bg">
          <label class="sec_text_lb"
                 v-for="(item,index) in textIndex"
                 :key="index"
                 @click="changeStyleClick(index)"
                 :class="calcFun(index)">{{ item.textTitle }}</label>
        </div>
      </div>

data数据

 data () {
    return {
      isWhich: 1,
      textIndex: [
        { textTitle: '个人中心' },
        { textTitle: '账户总览' },
        { textTitle: '存管信息' },
        { textTitle: '资金管理' },
        { textTitle: '充值' },
        { textTitle: '提现' },
        { textTitle: '资金记录' },
        { textTitle: '会员信息' },
        { textTitle: '基本信息' }
      ]
    }
  }

 computed: {
    //  必须这样写才能动态传递参数。稍后写一个简书记录一下
    calcFun () {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.isWhich = this.$store.state.mineStateTip
      return function (index) {
        let v = ''
        switch (index) {
          case 0:
            v = 'tabTitle'
            break
          case 3:
            v = 'tabTitle'
            break
          case 7:
            v = 'tabTitle'
            break
          default:
            v = (this.isWhich === index ? 'tabContent' : 'tabContentHover') + ' tabNor'
            break
        }
        return v
      }
    }
  }

下面是css样式

.tabTitle {
  font-size: 18px;
  font-weight: bold;
  color: #ff656b;
}

.tabContent {
  color: white;
  background: linear-gradient(315deg, #ffbe7e, #ff656b);
}

.tabNor {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.tabContentHover:hover {
  color: white;
  background: linear-gradient(315deg, #ffbe7e, #ff656b);
}

请忽略click点击方法。
以上就是问题记录。谢谢