有两个或以上按钮分别显示和隐藏各自的内容，那要怎么写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="show">hello world</div>
<div v-show="shows">hello beauty</div>
<button @click="handleClick">显示or隐藏</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
shows: true
},
methods: {
handleClick: function() {
this.show =! this.show,
this.shows =! this.shows
}
}
})</script>
</body>
</html>
我设置了两个按钮，想要隐藏各自内容，但是我无论点哪个按钮都会执行隐藏或显示命令，怎样使按钮能对应？
