這篇文章主要介紹vue中@change兼容問題的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計制作、
成都網(wǎng)站制作與策劃設(shè)計,魚峰網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:魚峰等地區(qū)。魚峰做網(wǎng)站價格咨詢:13518219792vue是什么
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
@change問題
1. 需求描述
需求：選擇日期，當(dāng)日期改變，則頁面相應(yīng)該日期的某些事件渲染
條件：
2. 問題產(chǎn)生及描述
問題： 兼容性差距，由于@change觸發(fā)方式不同，導(dǎo)致時間加載不夠統(tǒng)一，時間觸發(fā)出現(xiàn)問題。
描述如下：
使用vue做移動端時，由于需求需要，需要在頁面某處添加一個日期選擇的控件。由于不是面向用戶，內(nèi)部使用，因此本著不浪費資源的原則，直接使用h6自帶的input：
emm...CSS樣式不再贅述。然后綁定數(shù)據(jù),綁定change事件監(jiān)聽值變化：
selecrDate () {
// do something...
}
當(dāng)基本流程敲定后，在pc端沒問題。但注意，我們此時討論的是移動端效果，那么用pc端打開調(diào)試工具來模擬移動端機(jī)型顯然是不足以代表移動端真實場景的，因此需要在真機(jī)測試。ok，接下來，差異化出現(xiàn)。
由于@change的特性是當(dāng)監(jiān)聽到數(shù)據(jù)發(fā)生變化時則執(zhí)行，因此差異便是暴露出來：
由于此不同端所存在的差異化，導(dǎo)致了我們必須“兼容”這個問題。那么重點問題出現(xiàn)，如何兼容？
3. 解決方案
討論到此，我們必須想辦法先解決一個問題：如何在iOS端，阻止掉每一次選擇都自動執(zhí)行selectDate的問題。此時，經(jīng)過一番探尋查找，發(fā)現(xiàn)@blur方法可以替代iOS中的@change，說干就干，盤他：
ok,找個蘋果機(jī)試一下，完美，選擇年月日莫的問題，只有點擊確定之后才觸發(fā)該事件。但，所謂小人得志不可取，興高采烈的時候發(fā)現(xiàn)在安卓機(jī)上掛掉了。原因是在安卓機(jī)上選完以后，@blur事件并不會觸發(fā)，除非選擇完成之后，點擊別的區(qū)域來觸發(fā)此事件。因此，我們又面臨一個兼容問題，怎么同時保證在安卓和iOS系統(tǒng)上都能流暢運行呢？
有辦法——js辨別系統(tǒng)是安卓還是iOS：
const u = navigator.userAgent, app = navigator.appVersion;
// Android 判斷
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
// iOS 判斷
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid) {
// 這個是安卓操作系統(tǒng)
// do something
}
if (isIOS) {
// 這個是iOS操作系統(tǒng)
// do something
}有了此步驟，那接下來的事兒就簡單多了：
如果是安卓系統(tǒng)，則用@change;
如果是iOS系統(tǒng)，則用@blur;
由于是移動端，所以不考慮pc～；
以上是“vue中@change兼容問題的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前名稱：vue中@change兼容問題的示例分析-創(chuàng)新互聯(lián)
文章起源：
http://weahome.cn/article/dhgpjp.html
重慶分公司
重慶分公司
