Question

我想知道有没有办法解雇自定义函数 - 当复选框更改为true值时有一个函数，而当它更改为false值时有一个函数（不使用$ watch）。

例如：我的输入包含在root div中

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

和一个带有disableEditMode的vue实例（未选中复选框）和enableEditMode（选中复选框）

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>

根据Vue2中的复选框状态激活不同的功能

1 个答案: