有两个div用v-if加一个按钮显示隐藏

好的，这是一个简单的示例代码：

<template>
  <div>
    <button @click="showFirst = !showFirst">Toggle Div 1</button>
    <div v-if="showFirst">This is the first div</div>
    <button @click="showSecond = !showSecond">Toggle Div 2</button>
    <div v-if="showSecond">This is the second div</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showFirst: false,
      showSecond: false,
    };
  },
};
</script>

在这个示例中，我们有两个 `div` 元素和两个按钮，分别控制它们的显示和隐藏。使用 `v-if` 指令来控制元素的显示和隐藏。`v-if` 指令根据表达式的值的真假来条件性地渲染元素。当表达式为 `true` 时，元素被渲染，当表达式为 `false` 时，元素被移除。

相关问题

有两个div用v-if操作一个显示一个隐藏

好的，这是一个简单的示例代码：

<template>
  <div>
    <button @click="showFirst = !showFirst; showSecond = !showSecond">Toggle Divs</button>
    <div v-if="showFirst">This is the first div</div>
    <div v-if="showSecond" style="display: none;">This is the second div</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showFirst: true,
      showSecond: false,
    };
  },
};
</script>

在这个示例中，我们有两个 `div` 元素和一个按钮，点击按钮后切换它们的显示和隐藏。使用 `v-if` 指令来控制元素的显示和隐藏。当表达式为 `true` 时，元素被渲染，当表达式为 `false` 时，元素被移除。其中，第二个 `div` 元素使用了 `style="display: none;"` 来隐藏它，而不是通过 `v-if` 指令来控制它的显示和隐藏。

用v-if控制按钮的显示

可以使用 Vue.js 中的 `v-if` 指令来控制按钮的显示。例如，如果想在 `showButton` 的值为 `true` 时显示按钮，可以这样写：

<template>
  <div>
    <button v-if="showButton">Click me!</button>
  </div>
</template>

然后在 Vue.js 实例中设置 `showButton` 的值即可控制按钮的显示：

new Vue({
  el: '#app',
  data: {
    showButton: true
  }
})

当 `showButton` 的值为 `true` 时，按钮会显示出来；当 `showButton` 的值为 `false` 时，按钮会被隐藏起来。