Vue最简单的tab切换

最简单的方法进行切换新闻。
使用了一样东西。

data-id

这个东西就是我们在点击后获取这个按钮能获取的一样东西
默认的情况下是这个data-id是空的！
只要在三个按钮里放一个值你就可以决定了它哪一个显示

<template>
  <div id="app">

    <span>
      <button @click="ck" data-id="1">首页</button>
      <button @click="ck" data-id="2">详情</button>
      <button @click="ck" data-id="3">动态</button>
    </span>

    <h3 v-show="tab==1">1111111111111111111111111111111111111111</h3>
    <h3 v-show="tab==2">22222222222222222222222222222222222222222</h3>
    <h3 v-show="tab==3">33333333333333333333333333333333333333333</h3>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        tab:1
      }
    },
    methods:{
      ck(e)
      {
        let tabs = e.target.dataset.id
        this.tab = tabs
      }
    }
  }
</script>