從頭開始學(xué)習(xí)vue2.x

閱讀此文需要具備基礎(chǔ)的前端功底。。。比如說知道v-bind怎么動態(tài)更改class，style。知道vue-cli創(chuàng)建的vue項目的目錄結(jié)構(gòu)，以及每個vue文件的區(qū)域塊

之前做安卓，現(xiàn)在做前端。自學(xué)vue。不得不吐槽下vue文檔是真難讀懂。。。?？赡苁巧偌訕?biāo)點符號，也可能是vue的文檔是面向初級前端的。。。
回歸正題，自己在做demo的時候，遇到一些問題。比如，文檔與實際寫法有一定出入。

vue2.x官方文檔例圖

在實際項目中可能需要這樣寫：

實際demo中寫法

現(xiàn)在有這樣一個場景

請實現(xiàn)這樣的效果

導(dǎo)航欄使用的 v-for 語句創(chuàng)建（就是這一串標(biāo)題都放到一個數(shù)組里面給循環(huán)出來了）。第0，3，7的字體改變，并且標(biāo)紅，但是并沒有，點擊鼠標(biāo)懸浮的背景樣式（就是紅橙色的樣式）。
個人想法是，動態(tài)綁定class。使用vue中v-bind方法：:class = "calcFun(index)"之后再computed函數(shù)中寫上方法。因為沒看到文檔是傳參的操作，困擾了半天，最后搜索到了。具體寫法是這樣的：

computed傳參操作

這樣就可以將for循環(huán)的index給放入到具體操作的函數(shù)中了。具體代碼如下：

一部分html布局，動態(tài)更改該class

     <!--      左側(cè)導(dǎo)航欄-->
      <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數(shù)據(jù)

 data () {
    return {
      isWhich: 1,
      textIndex: [
        { textTitle: '個人中心' },
        { textTitle: '賬戶總覽' },
        { textTitle: '存管信息' },
        { textTitle: '資金管理' },
        { textTitle: '充值' },
        { textTitle: '提現(xiàn)' },
        { textTitle: '資金記錄' },
        { textTitle: '會員信息' },
        { textTitle: '基本信息' }
      ]
    }
  }

 computed: {
    //  必須這樣寫才能動態(tài)傳遞參數(shù)。稍后寫一個簡書記錄一下
    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點擊方法。
以上就是問題記錄。謝謝