How does vue conditionally render the contents of v-if?

clipboard.png

well, I"m going to ask you another question: "- questions | |, as shown in the figure: (how to add the content dynamically? )
here is the code:
html section:

        <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" @blur="inputPhone">
                    <input type="button"  class="btn_send_yzm" id="send_yzm" value="" @click="sendCode" />
                

<p class="form_tips" v-if="phone_tips">/

</li> </ul>

methods in methods:

        // input
        inputPhone(){
             let reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
            if(this.phone==""){
                console.log("");
            }else if(!reg.test(this.phone)){
                $(".p_phone").css("border","1px solid red");
                this.phone_tips=!this.phone_tips;
                //
                ....
            }else{
                console.log("");

            }
        },
Apr.23,2021

<p class="form_tips" v-if="phone_tips">{{phone_text}}

inputPhone(){
     let reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
    if(this.phone==""){
        this.phone_text = "";
    }else if(!reg.test(this.phone)){
        $(".p_phone").css("border","1px solid red");
        this.phone_tips=!this.phone_tips;
        this.phone_text = ""
        //
        ....
    }else{
        this.phone_text = ""

    }
},

the above is your idea, in fact, there is no need to write that, you can do this, one less variable

<p class="form_tips" v-if="phone_tips">{{phone_tips}}

inputPhone(){
     let reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
     this.phone_tips= ""
    if(this.phone==""){
        this.phone_tips= "";
    }else if(!reg.test(this.phone)){
        $(".p_phone").css("border","1px solid red");
        // this.phone_tips=!this.phone_tips;
        this.phone_tips= ""
        //
        ....
    }else{
        this.phone_tips= ""

    }
},

roughly steps are as follows:
1. Define a field in data , for example: tips: 'mobile phone number is empty / mobile phone number is malformed' ;
2, change the corresponding position in the template template like this: < p class= "form_tips" VIFF = "phone_tips" > {{tips}

.
3. In inputPhone , as long as you write this.tips='xxx' like this, the prompt text of the page will change after you modify the text!


. If you want me to write "Please fill in your mobile phone number accurately"

Menu