Vue中如何判斷對(duì)象是否為空
Vue判斷對(duì)象是否為空
方法一
將對(duì)象轉(zhuǎn)JSON，如果為空集合{} ，那么就是空對(duì)象
JSON.stringify(object)=='{}'方法二
判斷對(duì)象的長(zhǎng)度，如果為零，那就是空對(duì)象
Object.keys(object).length==0
Vue判斷對(duì)象為空|cannot read property ‘xx‘ of undefined
vue中判斷對(duì)象為空
結(jié)構(gòu)體如下
在調(diào)用text.value時(shí)，因默認(rèn)情況下text為空?qǐng)?bào)錯(cuò)
解決方法
使用 typeof 對(duì)text進(jìn)行判斷是否為 undefined
存在問(wèn)題
當(dāng)判斷text.value時(shí)會(huì)失效，因?yàn)閠ext就不存在，value更不用說(shuō)了所以直接判斷text就可以了
依據(jù)
在ESLint 0.5.0中引入 typeof操作符，用于強(qiáng)制與有效的字符串進(jìn)行比較 ESLint文檔地址
typeof通常與以下字符串比較：undefined、object、boolean、number、string、symbol和bigint
與其他字符串比較時(shí)，通常是個(gè)書(shū)寫(xiě)錯(cuò)誤
Options
該規(guī)則有一個(gè)對(duì)象選項(xiàng)：
"requireStringLiterals": true 要求 typeof 表達(dá)式只與字符串字面量或其它 typeof 表達(dá)式 進(jìn)行比較，禁止與其它值進(jìn)行比較。
錯(cuò)誤 代碼示例：
/*eslint valid-typeof: "error"*/ typeof foo === "strnig" typeof foo == "undefimed" typeof bar != "nunber" typeof bar !== "fucntion"
正確 代碼示例：
/*eslint valid-typeof: "error"*/ typeof foo === "string" typeof bar == "undefined" typeof foo === baz typeof bar === typeof qux
選項(xiàng) { "requireStringLiterals": true } 的 錯(cuò)誤 代碼示例：
typeof foo === undefined typeof bar == Object typeof baz === "strnig" typeof qux === "some invalid type" typeof baz === anotherVariable typeof foo == 5
選項(xiàng) { "requireStringLiterals": true } 的 正確 代碼示例：
typeof foo === "undefined" typeof bar == "object" typeof baz === "string" typeof bar === typeof qux
v-for與v-if 同時(shí)存在時(shí)，渲染錯(cuò)誤
解決方法
外層加一個(gè)template把v-for放在template標(biāo)簽中
v-for中的key理解
v-for 是循環(huán)，可以把數(shù)組中的元素遍歷出來(lái)，
vue3中，必須要有key參數(shù)，key就相當(dāng)于索引，
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js實(shí)現(xiàn)一個(gè)瀑布流的組件
這篇文章主要為大家介紹了vue.js實(shí)現(xiàn)一個(gè)瀑布流的組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
手把手教你如何將html模板資源轉(zhuǎn)為vuecli項(xiàng)目
Vue可以直接集成html,Vue就是前端框架,使用Vue做前端開(kāi)發(fā)效率非常高,下面這篇文章主要給大家介紹了關(guān)于如何將html模板資源轉(zhuǎn)為vuecli項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作
這篇文章主要介紹了vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題的解決
這篇文章主要介紹了使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue-router 前端路由之路由傳值的方式，本文通過(guò)兩種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Nuxt3嵌套路由,報(bào)錯(cuò)Failed?to?resolve?component:?NuxtChild的解決
這篇文章主要介紹了Nuxt3嵌套路由,報(bào)錯(cuò)Failed?to?resolve?component:?NuxtChild的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
在Store倉(cāng)庫(kù)里，state就是用來(lái)存放數(shù)據(jù)。如果很多組件都使用這個(gè)過(guò)濾后的數(shù)據(jù)，我們是否可以把這個(gè)數(shù)據(jù)抽提出來(lái)共享？這就是getters存在的意義。我們可以認(rèn)為，getters是store的計(jì)算屬性。本文將具體介紹一下getters的使用教程，需要的可以參考一下2022-01-01
Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue使用Less與Scss實(shí)現(xiàn)主題切換方法詳細(xì)講解
目前，在眾多的后臺(tái)管理系統(tǒng)中，換膚功能已是一個(gè)很常見(jiàn)的功能。用戶(hù)可以根據(jù)自己的喜好，設(shè)置頁(yè)面的主題，從而實(shí)現(xiàn)個(gè)性化定制。目前，我所了解到的換膚方式，也是我目前所掌握的兩種換膚方式，想同大家一起分享2023-02-02
vue在手機(jī)中通過(guò)本機(jī)IP地址訪(fǎng)問(wèn)webApp的方法
這篇文章主要介紹了vue在手機(jī)中通過(guò)本機(jī)IP地址訪(fǎng)問(wèn)webApp的方法,需要的朋友可以參考下2018-08-08