vue頁面多處v-show如何綁定事件?

假設(shè)error有三種'phoneNum','code','message'

<template>
    <ul class="form_ul">
        <li>
            <p class="p_phone">
                <label class="lable_phone" for="input_phone"></label><input id="input_phone" type="number" placeholder="請輸入手機(jī)號(hào)" maxlength="11" v-model="phone">
                <input type="button"  class="btn_send_yzm" id="send_yzm" value="發(fā)送驗(yàn)證碼" @click="sendCode" />
            </p>
            <p class="form_tips" v-show='error.type=="phoneNum"'>{{error.msg}}</p>      
        </li>
        <li>
            <p class="p_yzm">
                <label class="lable_yzm" for="input_yzm"></label><input id="input_yzm" type="text" placeholder="請輸入圖形驗(yàn)證碼" maxlength="4"><a href="#"><img class="img_yzm" src="" alt="loading"></a>
            </p>   
            <p class="form_tips" v-show='error.type=="code"'>圖形驗(yàn)證碼錯(cuò)誤</p>    
        </li>
        <li class="p_ryzm_li">
            <p class="p_ryzm">
                <label class="lable_ryzm" for="input_ryzm"></label><input id="input_ryzm" type="text" placeholder="請輸入短信驗(yàn)證碼" maxlength="6">   
            </p> 
            <p class="form_tips" v-show='error.type=="message"'>短信驗(yàn)證碼錯(cuò)誤</p>     
        </li>
    </ul>
</template>
        
<script>
export default{
    data(){
        return {
            error:{
                type:'',//表單項(xiàng)校驗(yàn)出錯(cuò)了要改
                msg:'' //錯(cuò)誤提示信息
        }
    },
    methods:{
        validateForm(){
            ....//驗(yàn)證表單，比如電話號(hào)碼沒通過
            this.error.type='phoneNum';
            this.error.msg='手機(jī)號(hào)為空';
        }
    }
}
</script>

每一個(gè)邏輯寫一個(gè)事件，對應(yīng)一個(gè)顯示隱藏字段，控制驗(yàn)證信息的顯示隱藏