vue页面多处v-show如何绑定事件?

Question

需要校验的是：
1、手机号非空校验 → 提示“手机号为空”，点击“发送验证码”触发
2、手机号格式校验 → 提示“手机号格式错误”，点击“发送验证码”触发
3、图形验证码 → 提示“图形验证码有误”，失去焦点触发
4、短信根据登录来校验

主要问题是：如何通过v-show指令来控制提示信息的隐藏与显示？希望各位前辈给个意见，感激不尽~

        <ul class="form_ul">
            <li>
                <p class="p_phone">
                    <label class="lable_phone" for="input_phone"></label><input id="input_phone" type="number" placeholder="请输入手机号" maxlength="11" v-model="phone">
                    <input type="button"  class="btn_send_yzm" id="send_yzm" value="发送验证码" @click="sendCode" />
                </p>
                <p class="form_tips" >手机号为空/手机号格式错误（此处提示动态渲染）</p>      
            </li>
            <li>
                <p class="p_yzm">
                    <label class="lable_yzm" for="input_yzm"></label><input id="input_yzm" type="text" placeholder="请输入图形验证码" maxlength="4"><a href="#"><img class="img_yzm" src="" alt="loading"></a>
                </p>   
                <p class="form_tips">图形验证码错误</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="请输入短信验证码" maxlength="6">   
                </p> 
                <p class="form_tips">短信验证码错误</p>     
            </li>
        </ul>

Answer 1

每一个逻辑写一个事件，对应一个显示隐藏字段，控制验证信息的显示隐藏

Answer 2

假设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="请输入手机号" maxlength="11" v-model="phone">
                <input type="button"  class="btn_send_yzm" id="send_yzm" value="发送验证码" @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="请输入图形验证码" maxlength="4"><a href="#"><img class="img_yzm" src="" alt="loading"></a>
            </p>   
            <p class="form_tips" v-show='error.type=="code"'>图形验证码错误</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="请输入短信验证码" maxlength="6">   
            </p> 
            <p class="form_tips" v-show='error.type=="message"'>短信验证码错误</p>     
        </li>
    </ul>
</template>
        
<script>
export default{
    data(){
        return {
            error:{
                type:'',//表单项校验出错了要改
                msg:'' //错误提示信息
        }
    },
    methods:{
        validateForm(){
            ....//验证表单，比如电话号码没通过
            this.error.type='phoneNum';
            this.error.msg='手机号为空';
        }
    }
}
</script>