js vue jq消除某个元素的click点击事件

原生js:

//页面
<div style="margin-top:20px;">
    <button onclick="clickMethod()" id="btn">点我</button>
    <button onclick="clearMethod()" >清除方法</button>
    <button onclick="clearMethod2()" id="btn2">jq清除方法</button>
</div>

• 可以直接赋值为空，但是清除后，再次点击，控制台会报错
• 直接修改方法，虽然没有报错，但是也没有清除，当然也要以return false
• 直接删除onclick，这个最完美

//原生js清除单击事件
    function clickMethod(){
        alert('我被点击了')
    }
    function clearMethod(){
        // clickMethod=""  //会报错
        // clickMethod=function(){
        //     console.log("我被修改了")
        // }
        console.log(document.getElementById('btn'))
        document.getElementById('btn').onclick=""  //不会报错

    }

jquery：直接了当

 //jq清除单击事件
    function clearMethod2(){
        $('#btn').removeAttr('onclick')
    }

vue

vue没有提供删除事件的方法，但是可以通过赋值的方式：

还有一种方式，通过增加一个变量的方式来完成不让元素的事件触发

//html
<div id="app">
    <button @click="flag && clickMe()" ref="me">点我</button>
    <button @click="recovery()">恢复方法</button>
    <button @click='clearMe()'>清除方法</button>
    <button @click='clearMe2()'>清除方法2</button>
    <!--<button @click='clearMe3()'>清除方法3</button>-->
</div>

//js
  let vm = new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {
            clickMe() {
                alert('我被点击了')
            },
            recovery() {
                this.flag=true

                this.clickMe = function () {
                    alert('我被点击了')
                }
            },
            clearMe() {  //使用标记变量来控制方法是否生效
                this.flag = false
            },
            clearMe2() {
                // this.clickMe = function () {  //可以直接修改
                //     console.log('我被修改了');
                // }
                this.clickMe = function () {  //return false 也可以间接清除方法
                    return false;
                }
                // this.clickMe = false //使用该方式会报错
                // this.clickMe = "" //使用该方式会报错
                console.log('清除方法')
            },
            clearMe3(){  //无法实现清除
                let me = this.$refs.me
                console.log(me)  //在控制台找不到单击事件
            }
        }
    })