Vue前端判断数据对象是否为空的实例
作者:shokang 发布时间:2024-05-02 16:53:14
看代码:
Vue提供了强大的前端开发架构,很多时候我们需要判断数据对象是否为空,使用typeof判断是个不错选择,具体代码见图。
补充知识:vue打包后 history模式 跟子目录 静态文件路径 分析
history
根目录
路由mode变为history后,需要在服务器配置 url重写,在根目录 创建web.config文件 加下面内容复制进去
<?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'
}
}
子目录
例如我在根目录下创建子目录名为app的文件夹作为项目文件夹
路由mode变为history后,需要在服务器配置 url重写,在根目录 创建web.config文件 加下面内容复制进去 与根目录不同的是
action 标签 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 根据不同的打包环境 dev 默认就是 / pro需要根据项目路径
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'
}
}
总结:
history模式,本地运行 肯定是在根目录 127.0.0.1:xxxx/# 使用上面根目录方法
打包发到生产环境,视情况使用
根目录和子目录 有些相同的引入方法
建议 直接使用相同的方法 同时适应根目录和子目录 部署
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'
}
}
来源:https://blog.csdn.net/shokang/article/details/89632706
猜你喜欢
- 游戏说明:一个考验您记忆力的游戏,只要两个方块的;图案能够凑成一对,最终翻开所有的图片,那么您就获胜,计算机将自动记录您的游戏时
- tkinter 绘制GUI简单明了,制作一些简单的GUI足够,目前遇到的一个问题是不能同时排列显示多幅图片(目前没找到同时显示解决方法),退
- 为什么说浮点数缺乏精确性?在开始本文之前,让我们先来谈谈浮点数为什么缺乏精确性的问题,其实这不是Python的问题,而是实数的无限精度跟计算
- 本文研究的主要是Python之reload流程的相关内容,具体如下。在Python中,reload() 用于重新载入之前载入的模块。relo
- 问题:mybatis返回的null类型数据消失,导致前端展示出错思路:如果查询出的结果是空值,应当转换成空字符串。当然在前端也能进行判断,但
- 我们在做诸如人群密集度等可视化的时候,可能会考虑使用热力图,在Python中能很方便地绘制热力图。下面以识别图片中的行人,并绘制热力图为例进
- 对于Mac上Homebrew安装的MySQL,默认情况下只能使用本地登录。而使用其它主机远程登录Mac上的MySQL则会被拒绝访问。下面修改
- 介绍AUC(Area Under Curve)被定义为ROC曲线下与坐标轴围成的面积,显然这个面积的数值不会大于1。又由于ROC曲线一般都处
- 一、list 合并第一种方法:a =[91,95,97,99]b =[92,93,96,98]c = a+b # 合并c.sor
- 目录主页分析代码:修改视图函数返回值修改 URL 规则修改视图函数名总结追溯到最初,Flask 诞生于 Armin Ronacher 在 2
- pytorch在Horovod上训练步骤分为以下几步:import torchimport horovod.torch as hvd# In
- 之前修改两张及以上表的时候,总得需要用几次语句才修改,万一其中一条没修改上,又没事务机制的话,处理很麻烦,于是想到能不能一条语句完成呢? 结
- 1. Graphql是什么?GraphQL是Facebook 在2012年开发的,2015年开源,2016年下半年Facebook宣布可以在
- 一 前言温习python 多进程语法的时候,对 join的理解不是很透彻,本文通过代码实践来加深对 join()的认识。multiproce
- 关于eslint空格缩进等的报错问题解决办法有四种1. 在.eslintrc.js文件中添加如下代码:rules: { &nb
- 需求是:针对三篇英文文章进行分析,计算出现次数最多的 10 个单词逻辑很清晰简单,不算难, 使用 python 读取多个 txt 文件,将文
- rhel5下默认安装mysql5.0后,中文显示为乱码原因:mysql默认字符集是latin,所以中文不能正常显示解决方法:修改配置文件,
- 本文实例讲述了ASP.NET数据库操作类。分享给大家供大家参考,具体如下:using System;using System.Data;us
- 本文实例为大家分享了python使用正则筛选信用卡的具体代码,供大家参考,具体内容如下本文来源于两个简单的题目:1.判断一对单词是否是&qu
- 这篇文章主要介绍了Python使用configparser库读取配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考