vue如何条件渲染v-if的内容？

Question

好吧，我又来问问题了￣□￣｜｜，如图所示:（提示内容该如何动态添加呢？）
下面是代码：
html部分：

        <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>
                <p class="form_tips" v-if="phone_tips">手机号为空/手机号格式错误（此处提示动态渲染）</p>      
            </li>
        </ul>

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("手机号格式正确");

            }
        },

Answer 1

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

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 = "手机号格式正确"

    }
},

以上是你的思路，其实完全没必要那么写，可以这样，少一个变量

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

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= "手机号格式正确"

    }
},

Answer 2

大概步骤如下：
1、在data中定义一个字段，例如：tips: '手机号为空/手机号格式错误';
2、将template模板中的相应位置改成这样：<p class="form_tips" v-if="phone_tips">{{ tips }}</p>;
3、在inputPhone中只要将这样写this.tips='xxx',修改文成之后页面的提示文字也就跟着变了！

Answer 3

...要我我就写"请准确填写手机号"