我在VueJS中使用VuetifyJS,如果切换switch ,我需要调用一个函数.怎么做?

模板:

 <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
      }
    }
  }
</script>

推荐答案

可以按如下方式设置watcher on switch1数据属性:

<script>
  export default {
    data () {
      return {
        switch1: false
      }
    },
    watch: {
      switch1(newValue){
        //called whenever switch1 changes
        console.log(newValue);
      }
    }
  }
</script>

由于v-switchv-model被绑定到switch1,所以每当switch 被切换到on/off时,switch1的手表处理器就会被改变的newValue调用

这是codepen美元

Vue.js相关问答推荐

Vue CDN的html工作,但v—如果不工作

vue : 多个样式的类绑定在一个

如何解决 importers[path] is not a function for clean Vue 3/Vite/Storybook installation

在 Vue 文件中创建根 Vue 实例

在 Vue 中启用(控制台)记录路由事件

Vuex store 在 Nuxt 的什么地方

如何对对象数组进行 v-model

Vue 单元测试:您正在开发模式下运行 Vue?

Object.assign 没有正确复制

webpack模块解析失败意外字符'@'

Vuetify / Offline离线图标

重新加载发布到 Github 页面的 Vue 网站时出现 404

Vuetify 单选按钮未显示为选中状态

在 vue/vuex(/flux?) 中使用 ES6 类是一种反模式吗?

重新加载页面正在 vue 组件中的插槽上闪烁内容

Vuex:无法读取未定义的属性'$store'

如何从方法内部访问数据

从子组件 Vue 更新父模型

在 Vue.js 模板中调用函数

vue-cli@3 没有可用于依赖类型的模块工厂:CssDependency