点击按钮，按钮被隐藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> v-bind </title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 2px solid #000;
            padding: 10px;
            margin-top: 10px;
        }
        button{
            margin-right: 6px;
        }
        #box.red{
            color: rgb(255, 136, 0);
            background-color: rgb(255, 238, 202);
            font-size:30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="seen=true">显示</button>
        <button @click="seen=flase">隐藏</button>
        <button @click="seen=!seen">切换</button>
        <button @click="add">增加类</button>
        <button @click="del">删除类</button>
        <button @click="huan">切换类</button>
        <!-- v-bind的简写  :class="{ ... }" -->
        <div id="box" v-if="seen" :class="{red:isRed}">被控制的div</div>
    </div>
    <script src="js/vue3.js"></script>
    <script>  
        Vue.createApp({
            data() {
                return {
                    seen:true, //true显示，false隐藏
                    isRed:false
                }
            },
            methods:{
                add(){
                    this.isRed=true
                },
                del(){
                    this.isRed=false
                },
                huan(){
                    this.isRed=!this.isRed
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

这个功能是点击按钮，下面的div会隐藏、显示，
想要按钮本身被隐藏要怎么改？放在elementUI里的table里呢？

你对按钮做同样的判断就可以了，让按钮和div 控制的属性保持一致

<button v-if="seen" @click="seen=flase">隐藏

给按钮绑定一个 v-if值。然后。点击改变这个值