vue 简单的tab切换滑动效果

实现一个简单的滑动效果：

代码逻辑比较简单，利用css的transform和transition属性实现简单的tab切换效果
贴上代码，仅供参考：
html部分：

<template>
    <div class="container">
        <div class="flex_c">
            <p style="margin-right:20px;" @click="tab('0')">切换</p>
            <p style="margin-right:20px;" @click="tab('1')">切换</p>
            <p style="margin-right:20px;" @click="tab('2')">切换</p>
            <p style="margin-right:20px;" @click="tab('3')">切换</p>
        </div>
        <div class="flex tab-content" :style="sty">
            <p class="content">这是内容这是内容1111111</p>
            <p class="content">这是内容这是内容2222222</p>
            <p class="content">这是内容这是内容3333333</p>
            <p class="content">这是内容这是内容44444444</p>
        </div>
    </div>
</template>

js部分：
利用computed属性计算位移距离

data() {
        return {
            value: '0'
        };
    },
    computed: {
        sty() {
            let num = Number(this.value) * 100
            return `transform: translateX(-${num/3}%);transition: all 0.3s;`
        }
    },
    methods: {
        tab(v) {
            this.value = v
        }
    },

css部分：

<style>
.tab-content {
  width: 300%;
}
.content {
  width: 1104px;
  flex-shrink: 0;
}
</style>

代码比较简单，可根据个人需求进行修改。