Vue前端判断数据对象是否为空的实例


Posted in Javascript onSeptember 02, 2020

看代码:

Vue前端判断数据对象是否为空的实例

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'
 }
}

以上这篇Vue前端判断数据对象是否为空的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 一些用法小结
Sep 11 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
小程序实现分类页
Jul 12 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
详解JavaScript 事件流
Sep 02 #Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 #Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 #jQuery
JavaScript交换变量常用4种方法解析
Sep 02 #Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 #Javascript
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python使用插值法画出平滑曲线
2018/12/15 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
法律系毕业生自荐信范文
2014/03/27 职场文书
家长对学生的评语
2014/04/18 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
管理人员岗位职责
2015/02/14 职场文书
教师辞职书范文
2015/02/26 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
python3.9之你应该知道的新特性详解
2021/04/29 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS