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

Question

我想知道有没有什么方法可以触发自定义函数 - 当复选框变为真值时触发一个函数，当复选框变为假值时触发另一个函数(不使用 $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
        }
    },
});

我怎样才能实现这个功能？谢谢!

Answer 1

处理更改事件。

@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/vue@2.4.2"></script>
<div id="root">
   <input type="checkbox" v-model="editModeOn" @change="editModeOn ? enableEditMode() : disableEditMode()">
</div>