Vue前端判斷數(shù)據(jù)對(duì)象是否為空的實(shí)例
看代碼：
Vue提供了強(qiáng)大的前端開發(fā)架構(gòu)，很多時(shí)候我們需要判斷數(shù)據(jù)對(duì)象是否為空，使用typeof判斷是個(gè)不錯(cuò)選擇，具體代碼見圖。
補(bǔ)充知識(shí)：vue打包后 history模式 跟子目錄 靜態(tài)文件路徑 分析
history
根目錄
路由mode變?yōu)閔istory后，需要在服務(wù)器配置 url重寫,在根目錄 創(chuàng)建web.config文件 加下面內(nèi)容復(fù)制進(jìn)去
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
background: url('/static/logo.png') no-repeat center/ 50%; 跟路徑 / 和 相對(duì)路徑
<img src="/static/logo.png" alt="" srcset=""> 跟路徑 / 和 相對(duì)路徑
<div class="image1" style="background:url('../static/logo.png')"></div> 跟路徑 / 和 ../
<img :src="image" alt="" srcset=""> 跟路徑 / 和../
data () {
return {
image: '../static/logo.png'
}
}
子目錄
例如我在根目錄下創(chuàng)建子目錄名為app的文件夾作為項(xiàng)目文件夾
路由mode變?yōu)閔istory后，需要在服務(wù)器配置 url重寫,在根目錄 創(chuàng)建web.config文件 加下面內(nèi)容復(fù)制進(jìn)去 與根目錄不同的是
action 標(biāo)簽 url /app/index.html
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/app/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
config index.js文件下 build對(duì)象中publicPatch 從默認(rèn)的 / 改成 自己部署的 子目錄名稱 /app/
build: {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/app/',
}
router.js 需要改下 base 根據(jù)不同的打包環(huán)境 dev 默認(rèn)就是 / pro需要根據(jù)項(xiàng)目路徑
var base = process.env.NODE_ENV === 'development' ? '/' : '/app/'
export default new Router({
mode: 'history',
base: base,
routes: []
})
background: url('../../static/logo.png') no-repeat center/ 50%; 相對(duì)路徑
<img src="../../static/logo.png" alt="" srcset=""> 相對(duì)路徑
<div class="image1" style="background:url('../static/logo.png')"></div> ../
<img :src="image" alt="" srcset=""> ../
data () {
return {
image: '../static/logo.png'
}
}
總結(jié)：
history模式，本地運(yùn)行 肯定是在根目錄 127.0.0.1:xxxx/# 使用上面根目錄方法
打包發(fā)到生產(chǎn)環(huán)境，視情況使用
根目錄和子目錄 有些相同的引入方法
建議 直接使用相同的方法 同時(shí)適應(yīng)根目錄和子目錄 部署
background: url('../../static/logo.png') no-repeat center/ 50%; 相對(duì)路徑
<img src="../../static/logo.png" alt="" srcset=""> 相對(duì)路徑
<div class="image1" style="background:url('../static/logo.png')"></div> ../
<img :src="image" alt="" srcset=""> ../
data () {
return {
image: '../static/logo.png'
}
}
以上這篇Vue前端判斷數(shù)據(jù)對(duì)象是否為空的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用v-model收集各種表單數(shù)據(jù)、過濾器的示例詳解
這篇文章主要介紹了Vue使用v-model收集各種表單數(shù)據(jù)、過濾器的示例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
vue實(shí)現(xiàn)無縫滾動(dòng)的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue非組件如何實(shí)現(xiàn)列表的無縫滾動(dòng)效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09
Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖自動(dòng)播放功能
better-scroll是一個(gè)非常非常強(qiáng)大的第三方庫 在移動(dòng)端利用這個(gè)庫 不僅可以實(shí)現(xiàn)一個(gè)非常類似原生ScrollView的效果 也可以實(shí)現(xiàn)一個(gè)輪播圖的效果。這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Vue在 Nuxt.js 中重定向 404 頁面的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
在vue中實(shí)現(xiàn)echarts隨窗體變化
這篇文章主要介紹了在vue中實(shí)現(xiàn)echarts隨窗體變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
今天小編就為大家分享一篇vue 父組件通過$refs獲取子組件的值和方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)頁面訪問攔截功能，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以了解一下2023-08-08
Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁面
對(duì)于單頁應(yīng)用，官方提供了vue-router進(jìn)行路由跳轉(zhuǎn)的處理，這篇文章主要給大家介紹了Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁面的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用瀏覽器分享的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue 實(shí)現(xiàn)登錄界面驗(yàn)證碼功能
本文通過實(shí)例代碼給大家介紹了Vue 實(shí)現(xiàn)登錄界面 驗(yàn)證碼功能，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01