vue switch 切换函数

Vue 中的 switch 切换功能可以使用 v-if 或 v-show 指令来实现。以下是使用 v-if 实现 switch 切换的示例代码：

HTML 代码：

<div id="app">
  <button @click="show1 = !show1">Toggle 1</button>
  <button @click="show2 = !show2">Toggle 2</button>
  <div v-if="show1">Content 1</div>
  <div v-if="show2">Content 2</div>
</div>

JavaScript 代码：

new Vue({
  el: '#app',
  data: {
    show1: false,
    show2: false
  }
});

在上面的代码中，我们使用了两个按钮来切换两个 div 元素的显示和隐藏。show1 和 show2 变量控制了对应的 div 元素的显示和隐藏。

如果我们想使用 v-show 实现 switch 切换，代码会稍微改变一下：

HTML 代码：

<div id="app">
  <button @click="toggle1">Toggle 1</button>
  <button @click="toggle2">Toggle 2</button>
  <div v-show="show1">Content 1</div>
  <div v-show="show2">Content 2</div>
</div>

JavaScript 代码：

new Vue({
  el: '#app',
  data: {
    show1: false,
    show2: false
  },
  methods: {
    toggle1: function() {
      this.show1 = !this.show1;
    },
    toggle2: function() {
      this.show2 = !this.show2;
    }
  }
});

在上面的代码中，我们使用了两个按钮来切换两个 div 元素的显示和隐藏。toggle1 和 toggle2 方法控制了对应的 div 元素的显示和隐藏。在这种情况下，我们使用了 v-show 指令来实现切换。