javascript - 根据Vue2中的复选框状态触发不同的功能

我想知道有什么方法可以触发自定义函数-一个功能在复选框更改为真实值时，另一种功能在更改为错误值时（不使用$ watch）。

例如：
我有输入包装在根div

<div id="root">
   <input type="checkbox" v-model="editModeOn">
</div>

以及具有disableEditMode（未选中复选框）和enableEditMode（已选中复选框）的vue实例

new Vue({
    el: '#root',
    props: {
        editModeOn: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        disableEditMode() {
            // some code
        },
        enableEditMode() {
            // some code
        }
    },
});

如何实现此功能？谢谢！

最佳答案

处理更改事件。

@change="editModeOn ? enableEditMode() : disableEditMode()"

new Vue({
    el: '#root',
    data:{
        editModeOn: false
    },
    methods: {
        disableEditMode() {
           console.log("disable")
        },
        enableEditMode() {
            console.log("enable")
        }
    },
});

<script src="https://unpkg.com/[email protected]"></script>
<div id="root">
   <input type="checkbox" v-model="editModeOn" @change="editModeOn ? enableEditMode() : disableEditMode()">
</div>