Vue前端判斷數(shù)據(jù)對象是否為空的實例
看代碼：
Vue提供了強大的前端開發(fā)架構(gòu)，很多時候我們需要判斷數(shù)據(jù)對象是否為空，使用typeof判斷是個不錯選擇，具體代碼見圖。
補充知識：vue打包后 history模式 跟子目錄 靜態(tài)文件路徑 分析
history
根目錄
路由mode變?yōu)閔istory后，需要在服務(wù)器配置 url重寫,在根目錄 創(chuàng)建web.config文件 加下面內(nèi)容復(fù)制進去
<?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%; 跟路徑 / 和 相對路徑
<img src="/static/logo.png" alt="" srcset=""> 跟路徑 / 和 相對路徑
<div class="image1" style="background:url('../static/logo.png')"></div> 跟路徑 / 和 ../
<img :src="image" alt="" srcset=""> 跟路徑 / 和../
data () {
return {
image: '../static/logo.png'
}
}
子目錄
例如我在根目錄下創(chuàng)建子目錄名為app的文件夾作為項目文件夾
路由mode變?yōu)閔istory后，需要在服務(wù)器配置 url重寫,在根目錄 創(chuàng)建web.config文件 加下面內(nèi)容復(fù)制進去 與根目錄不同的是
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對象中publicPatch 從默認的 / 改成 自己部署的 子目錄名稱 /app/
build: {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/app/',
}
router.js 需要改下 base 根據(jù)不同的打包環(huán)境 dev 默認就是 / pro需要根據(jù)項目路徑
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%; 相對路徑
<img src="../../static/logo.png" alt="" srcset=""> 相對路徑
<div class="image1" style="background:url('../static/logo.png')"></div> ../
<img :src="image" alt="" srcset=""> ../
data () {
return {
image: '../static/logo.png'
}
}
總結(jié)：
history模式，本地運行 肯定是在根目錄 127.0.0.1:xxxx/# 使用上面根目錄方法
打包發(fā)到生產(chǎn)環(huán)境，視情況使用
根目錄和子目錄 有些相同的引入方法
建議 直接使用相同的方法 同時適應(yīng)根目錄和子目錄 部署
background: url('../../static/logo.png') no-repeat center/ 50%; 相對路徑
<img src="../../static/logo.png" alt="" srcset=""> 相對路徑
<div class="image1" style="background:url('../static/logo.png')"></div> ../
<img :src="image" alt="" srcset=""> ../
data () {
return {
image: '../static/logo.png'
}
}
以上這篇Vue前端判斷數(shù)據(jù)對象是否為空的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章給大家分享了vue.js刪除列表中的一行的實例操作以及代碼分享，有興趣的朋友參考下。2018-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖拽滑動分割面板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vuex中的映射允許您將state中的任何屬性(state、getter、mutation和action)綁定到組件中的計算屬性,并直接使用state中的數(shù)據(jù)，下面我們來詳細了解2022-09-09
websocket通信是很好玩的,也很有用的的通信方式,下面這篇文章主要給大家介紹了關(guān)于Vue中前后端使用WebSocket的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue實現(xiàn)底部側(cè)邊工具欄的實例代碼，文中通過分享一段代碼介紹vue 側(cè)邊導(dǎo)航欄遞歸顯示功能,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了Vue中的虛擬DOM、diff算法、key的作用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了如何使用vue實現(xiàn)跨域訪問第三方http請求,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了Vue文本模糊匹配功能如何實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
解決element-ui中Popconfirm氣泡確認框的事件不生效問題
這篇文章主要介紹了解決element-ui中Popconfirm氣泡確認框的事件不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07