鍍金池/ 問答/HTML5  HTML/ vue如何條件渲染v-if的內(nèi)容？

vue如何條件渲染v-if的內(nèi)容？

clipboard.png

好吧，我又來問問題了￣□￣｜｜，如圖所示:（提示內(nèi)容該如何動(dòng)態(tài)添加呢？）
下面是代碼：
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="請輸入手機(jī)號" maxlength="11" v-model="phone" @blur="inputPhone">
                    <input type="button"  class="btn_send_yzm" id="send_yzm" value="發(fā)送驗(yàn)證碼" @click="sendCode" />
                </p>
                <p class="form_tips" v-if="phone_tips">手機(jī)號為空/手機(jī)號格式錯(cuò)誤（此處提示動(dòng)態(tài)渲染）</p>      
            </li>
        </ul>

methods內(nèi)的方法：

        // 手機(jī)號input失去焦點(diǎn)
        inputPhone(){
             let reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
            if(this.phone==""){
                console.log("請輸入手機(jī)號碼");
            }else if(!reg.test(this.phone)){
                $(".p_phone").css("border","1px solid red");
                this.phone_tips=!this.phone_tips;
                //如何動(dòng)態(tài)添加提示內(nèi)容信息，即紅絲字體部分？
                ....
            }else{
                console.log("手機(jī)號格式正確");

            }
        },
回答
編輯回答
雨萌萌

...要我我就寫"請準(zhǔn)確填寫手機(jī)號"

2018年5月18日 12:32
編輯回答
毀與悔

大概步驟如下：
1、在data中定義一個(gè)字段，例如：tips: '手機(jī)號為空/手機(jī)號格式錯(cuò)誤';
2、將template模板中的相應(yīng)位置改成這樣：<p class="form_tips" v-if="phone_tips">{{ tips }}</p>;
3、在inputPhone中只要將這樣寫this.tips='xxx',修改文成之后頁面的提示文字也就跟著變了！

2018年4月12日 03:43
編輯回答
莫小染
<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 = "請輸入手機(jī)號碼";
    }else if(!reg.test(this.phone)){
        $(".p_phone").css("border","1px solid red");
        this.phone_tips=!this.phone_tips;
        this.phone_text = "如何動(dòng)態(tài)添加提示內(nèi)容信息，即紅絲字體部分"
        //如何動(dòng)態(tài)添加提示內(nèi)容信息，即紅絲字體部分？
        ....
    }else{
        this.phone_text = "手機(jī)號格式正確"

    }
},

以上是你的思路，其實(shí)完全沒必要那么寫，可以這樣，少一個(gè)變量

<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= "請輸入手機(jī)號碼";
    }else if(!reg.test(this.phone)){
        $(".p_phone").css("border","1px solid red");
        // this.phone_tips=!this.phone_tips;
        this.phone_tips= "如何動(dòng)態(tài)添加提示內(nèi)容信息，即紅絲字體部分"
        //如何動(dòng)態(tài)添加提示內(nèi)容信息，即紅絲字體部分？
        ....
    }else{
        this.phone_tips= "手機(jī)號格式正確"

    }
},
2018年9月8日 22:50