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

半橙汁
  • 118

clipboard.png

好吧,我又来问问题了 ̄□ ̄||,如图所示:(提示内容该如何动态添加呢?)
下面是代码:
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("手机号格式正确");

            }
        },
回复
阅读 3k
3 个回答
我养了一窝汪汪
  • 952
✓ 已被采纳
<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= "手机号格式正确"

    }
},

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

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

宣传栏