<!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里呢？
