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

如下圖是一個(gè)注冊流程，
圖片描述

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

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

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

回答

編輯回答

妖妖

methods:{

handle(){
    your code
            }
}

2018年3月26日 15:24

編輯回答

局外人

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

2017年9月12日 07:20

編輯回答

孤島

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

2017年8月8日 00:37

編輯回答

怣痛

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

// 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,      // 是否顯示錯(cuò)誤信息
            showBackErr:false,  // 是否顯示后臺(tái)錯(cuò)誤信息
        },
        iptDatas:[
            {
                errInfo:'錯(cuò)誤信息1',
                focusInfo:'獲取焦點(diǎn)提示信息1',
                backErrInfo:'后臺(tái)返回的錯(cuò)誤信息1',
                data:''
            },
            {
                errInfo:'錯(cuò)誤信息2',
                focusInfo:'獲取焦點(diǎn)提示信息2',
                backErrInfo:'后臺(tái)返回的錯(cuò)誤信息2',
                data:''
            },
            {
                errInfo:'錯(cuò)誤信息3',
                focusInfo:'獲取焦點(diǎn)提示信息3',
                backErrInfo:'后臺(tái)返回的錯(cuò)誤信息3',
                data:''
            }
        ]
    }
}

2017年5月30日 04:26