假設(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ī)號" maxlength="11" v-model="phone">
                <input type="button"  class="btn_send_yzm" id="send_yzm" value="發(fā)送驗證碼" @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='手機(jī)號為空';
        }
    }
}
</script>

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