Vue焦点状态切换写法：

HTML:

<button v-for="(item,index) in detailTab" :class="{active:index === tabIndex}" @click="changeTab(index)"> 
                  {{item}} </button>

JS:

let detailTab = ['商品详情','本店成交']   //声明需要切换的el

new Vue({
    el:'#app',
    data : {
        details : null,  
        detailTab,     //将el放进data
        tabIndex: 0, //初始化一下
    },
    created () {
        
    },
    methods: {
        changeTab(index){
            this.tabIndex = index
        }
    },

tips：

1.不管是PC端还是移动端，凡是图片都要固定宽高，目的是为了防止页面抖动。

2.实际开发中页面层级挺重要的，有四层，分别是内容层，导航层，阴影遮罩层，弹出层。称之为层级规范。

3.跳转页面写法：

标签里写
:href="'xxx.html?id='+id"
JS的data里加入id

4.使用v-cloak让页面隐藏未编译的内容，直到实例准备完毕。

用法：
在实例挂载点的标签内加入 v-cloak
head里写：
<style>
    [v-cloak] {
      display: none;
    }
  </style>

5.v-html方法，以及v-transition，相关看Vue的文档。（日后更新详细博客）