在vue中如何在符合条件的情况下才绑定事件

Question

---

 <button @click.prevent="getVerifyCode">获取验证码</button>

比如这样的一行代码，假设我有一个isRightPhoneNumber这样的变量，我希望只有当我的isRightPhoneNumber为true时才让上面按钮的事件生效该怎么做？我想到的一个办法是在getVerifyCode函数里面加判断，像这样

if(!this.isRightPhoneNumber) return;

但是我不太想用这种办法，所以想问下有没有别的方法，类似于v-if之类的做法有吗

{{messageLogin?'登录':'密码登录'}}

<form class='message-form' v-if='messageLogin'></form>

Answer 1

:disabled="!isRightPhoneNumber"

Answer 2

如果为了易读不在乎微乎其微的性能的话。

@click="isRightPhoneNumber && getVerifyCode()"

Answer 3

在Vue2.4+ 版本上， 该问题可使用以下方式解决：

`<template>

<div class="c-button" 
    :class="{'c-button-over': isOver,'c-button-disabled' : isDisable}" 
    v-on="onEvents">
    <i class="fa" :class="cbutton.type"></i>
    <span class="button-title">{{cbutton.title}}</span>
    <span v-show="showHelp" class="button-help">{{cbutton.help}}</span>
</div>

</template>

<script>

export default {
    name: 'CommandButton',
    props:{
        cbutton:Object,
        currentRecords:Array
    },
    data() {
        return {
            showHelp: false,
            isOver: false
        }
    },
    computed:{
        isDisable() {
            return this.cbutton.isDisableFun(this.currentRecords);
        },
        onEvents() {
            let eventsObj = {};
            if(!this.isDisable) {
                eventsObj = {mouseover:this.btnOver,mouseout:this.btnOut,click:this.btnClick};
            }
            
            return eventsObj;
        }
    },
    mounted() {
        
    },
    methods: {
        btnClick(){
            this.cbutton.clickFun(this.currentRecords);
        },
        btnOver(){
            this.isOver=true;
        },
        btnOut(){
            this.isOver=false;
        }
    }
}

</script>`

通过 v-on 指令绑定对象的，结合 computed 计算依赖disabled属性监听的方式实现。