鍍金池/ 問答/HTML/ vue即時提醒如何實現(xiàn)？

vue即時提醒如何實現(xiàn)？

如下圖是一個注冊流程，
圖片描述

當(dāng)鼠標(biāo)聚焦的時候相應(yīng)的input下方顯示提示信息：
圖片描述
輸入信息失焦后，如果信息格式不對顯示錯誤信息：
圖片描述

我現(xiàn)在的做法是在每個input上都添加上blur和focus事件，每個input對應(yīng)的有四個變量，一個控制顯示錯誤信息，一個控制顯示聚焦時的提示信息，一個是后臺返回的錯誤信息，一個是input的v-model值傳給后臺，這樣的話3個input框data中就有12個變量。
圖片描述
圖片描述

這樣感覺不太合適，但是我又想不到更好的方法，請各位大手子指教！?。?/p>

回答
編輯回答
妖妖

<input @blur=“handle”>

methods:{

handle(){
    your code
            }
}
2018年3月26日 15:24
編輯回答
局外人

基本上就是這樣了， 如果你覺得data里的變量多了可以根據(jù)業(yè)務(wù)合并一些

2017年9月12日 07:20
編輯回答
孤島

就像樓上回答的那樣，用v-on綁定vue實例定義的方法，vue文檔或者入門教程之類的里面都有
vue之處理用戶輸入

2017年8月8日 00:37
編輯回答
怣痛

最好是用數(shù)組將這些數(shù)據(jù)保存起來，利用循環(huán)來做。在focus和blur事件中進(jìn)行變量（nowShow.showAlert/showErr/showBackErr）的改變，我簡單的寫個例子：

// template
<div v-for="item in iptDatas">
    <input type="text" v-model="item.data" @focus="focusFun" @blur="blurFun"/>
    <p>{{nowShow.showAlert ? item.focusInfo : nowShow.showErr ? item.errInfo : nowShow.showBackErr ? item.backErrInfo : ''}}</p>
</div>

// js
data:function(){
    return{
        // 用于控制當(dāng)前正在操作的input
        nowShow:{
            showAlert:false,    // 是否顯示提示語
            showErr:false,      // 是否顯示錯誤信息
            showBackErr:false,  // 是否顯示后臺錯誤信息
        },
        iptDatas:[
            {
                errInfo:'錯誤信息1',
                focusInfo:'獲取焦點(diǎn)提示信息1',
                backErrInfo:'后臺返回的錯誤信息1',
                data:''
            },
            {
                errInfo:'錯誤信息2',
                focusInfo:'獲取焦點(diǎn)提示信息2',
                backErrInfo:'后臺返回的錯誤信息2',
                data:''
            },
            {
                errInfo:'錯誤信息3',
                focusInfo:'獲取焦點(diǎn)提示信息3',
                backErrInfo:'后臺返回的錯誤信息3',
                data:''
            }
        ]
    }
}
2017年5月30日 04:26