Vue新手實踐，Vue+bootstrap寫一個簡單的Tab導航組件

用到的語法：

1、v-bind：class

2、v-for:

3、@click

實現出來就是這個效果，

非常簡單，對於新手來說再合適不過了通過vue-cli創建的項目，bootstrap的包我是直接link在index.html裏

用:class綁定樣式來控制active狀態，相比於jquery的簡單粗暴會有所不同

話不多說直接上代碼

<template>
  <footer>
    <ul class="nav nav-tabs" >
      <li role="presentation" v-for="item in navList" :key="item.id" :class="{ active: item.isActive }" @click="changeActive(item)">
        <a href="#">{{item.text}}</a>
      </li>
    </ul>
  </footer>
</template>
<script>
export default {
  name: 'MyFooter',
  data () {
    return {
      navList: [
        {text: '首頁', isActive: true},
        {text: '寫文章', isActive: false},
        {text: '個人中心', isActive: false}
      ]
    }
  },
  methods: {
  /* changeActive: (data) => (console.log(this.navList))
  * 箭頭函數的this指向爲當前對象
  * */
    changeActive: function (data) {
      this.navList.forEach((obj) => (obj.isActive = false))
      data.isActive = !data.isActive
    }
  }
}
</script>
<style lane="scss">
  footer{
    position: absolute;
    bottom: 0;
  }
</style>