VueJS/VuetifyJS中开关切换时调用函数的实现方法

嘿，我来帮你搞定这个问题！在Vuetify的v-switch组件上实现切换时触发函数，有两种非常实用的方式，我结合你提供的代码逐一说明：

方法1：使用Vue的watch监听状态变化 #

这种方式适合需要在switch1的值发生改变时自动执行逻辑的场景，不需要修改模板代码，只需要在脚本里添加watch配置：

<template>
  <v-container fluid>
    <v-switch :label="`Switch 1: ${switch1.toString()}`" v-model="switch1"></v-switch>
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      switch1: false
    }
  },
  watch: {
    // 监听switch1的变化，newVal是新值，oldVal是旧值
    switch1(newVal, oldVal) {
      console.log(`开关从${oldVal}切换到了${newVal}`);
      this.yourCustomFunction(newVal); // 调用自定义业务函数
    }
  },
  methods: {
    yourCustomFunction(value) {
      // 这里写你需要执行的业务逻辑
      alert(`当前开关状态：${value}`);
    }
  }
}
</script>

方法2：直接绑定v-switch的change事件 #

Vuetify的v-switch组件自带change事件，会在用户手动切换开关状态时触发，你可以直接在模板里绑定这个事件到自定义函数：

<template>
  <v-container fluid>
    <!-- 绑定change事件，$event会自动传递开关的新状态值 -->
    <v-switch 
      :label="`Switch 1: ${switch1.toString()}`" 
      v-model="switch1"
      @change="handleSwitchChange($event)"
    ></v-switch>
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      switch1: false
    }
  },
  methods: {
    handleSwitchChange(newVal) {
      // 开关切换时执行的逻辑
      console.log(`开关新状态：${newVal}`);
      this.doBusinessLogic(newVal);
    },
    doBusinessLogic(value) {
      // 自定义业务处理代码
      console.log(`根据开关状态${value}执行操作`);
    }
  }
}
</script>

小提醒 #

• 如果你的逻辑只需要响应用户手动切换操作，优先选方法2，因为watch会在任何修改switch1的场景（比如代码里直接赋值）都触发；
• 如果需要监听switch1所有值的变化（包括代码修改），那方法1更合适。

内容的提问来源于stack exchange，提问作者Tom