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前端判断数据对象是否为空的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 如何修改Vue打包后文件的接口地址配置的方法

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案 进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的

  • Vue-cli打包后部署到子目录下的路径问题说明

    默认情况下以当前域名为根目录向下访问. 举例,若需要部署到www.***.com/catalog1/catalog2/下,需要更改 1.config/index.js文件中,build下assetsPublicPath属性为'/catalog1/catalog2/',如下: build: { assetsPublicPath: '/catalog1/catalog2/', 默认情况下该值为'/'(该属性目测是webpack打包时的文件引用路径的基础路径). 2.修改路由base属性为'/cata

  • vue cli3.0打包上线静态资源找不到路径的解决操作

    项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

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

    看代码: Vue提供了强大的前端开发架构,很多时候我们需要判断数据对象是否为空,使用typeof判断是个不错选择,具体代码见图. 补充知识:vue打包后 history模式 跟子目录 静态文件路径 分析 history 根目录 路由mode变为history后,需要在服务器配置 url重写,在根目录 创建web.config文件 加下面内容复制进去 <?xml version="1.0" encoding="utf-8"?> <configurat

  • vue前端页面数据加载添加loading效果的实现

    目录 前端页面数据加载添加loading效果 具体实现 全局loading配置 1 再src/componennts/Spinner下面建立一个index.vue 2 再utils下面tools.js 3 再utils下面建议一个request.js 封装的axios请求 4 修改app.vue 前端页面数据加载添加loading效果 在前端上传文件或者加载数据的时候会有一段等待时间,如果加上一个loading效果会减轻用户等待的枯燥,这里就来记录学习一下如何实现loading效果. 效果大致如

  • 如何判断Javascript对象是否存在的简单实例

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别

  • CheckBox多选取值及判断CheckBox选中是否为空的实例

    实例如下: var chk_value = [];//定义一个数组 //name是CheckBox的name属性定义的名称 $('input[name="time"]:checked').each(function () { chk_value.push($(this).val()); }); if (chk_value.length < 1) { alert("CheckBox选项为空") return false; } alert(chk_value );

  • Vue监听数据对象变化源码

    监听数据对象变化,最容易想到的是建立一个需要监视对象的表,定时扫描其值,有变化,则执行相应操作,不过这种实现方式,性能是个问题,如果需要监视的数据量大的话,每扫描一次全部的对象,需要的时间很长.当然,有些框架是采用的这种方式,不过他们用非常巧妙的算法提升性能,这不在我们的讨论范围之类. Vue 中数据对象的监视,是通过设置 ES5 的新特性(ES7 都快出来了,ES5 的东西倒也真称不得新)Object.defineProperty() 中的 set.get 来实现的. 目标 与官方文档第一个例

  • Java 判断实体对象及所有属性是否为空的操作

    1.判断实体对象是否为空 2.判断对象所有属性是否为空 3.特别注意,实体类中如果有基本数据类型,会影响判断 package com.liuxd.object; import org.apache.commons.lang3.StringUtils; import java.lang.reflect.Field; /** * Created by Liuxd on 2018/11/2. */ public class TestEntity { public static void main(St

  • vue watch监听对象及对应值的变化详解

    如下所示: var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:true }

  • Vue中如何判断对象是否为空

    目录 Vue判断对象是否为空 方法一 方法二 Vue判断对象为空|cannot read property ‘xx‘ of undefined 结构体如下 解决方法 v-for中的key理解 Vue判断对象是否为空 方法一 将对象转JSON,如果为空集合{} ,那么就是空对象 JSON.stringify(object)=='{}' 方法二 判断对象的长度,如果为零,那就是空对象 Object.keys(object).length==0 Vue判断对象为空|cannot read proper

  • vue前端优雅展示后端十万条数据面试点剖析

    目录 前置工作 后端搭建 前端页面 直接渲染 setTimeout分页渲染 requestAnimationFrame 文档碎片 + requestAnimationFrame 懒加载 虚拟列表 前置工作 如果后端真的返回给前端10万条数据,咱们前端要怎么优雅地展示出来呢?(哈哈假设后端真的能传10万条数据到前端) 先把前置工作给做好,后面才能进行测试 后端搭建 新建一个server.js文件,简单起个服务,并返回给前端10w条数据,并通过nodemon server.js开启服务 没有安装no

  • vue前端测试开发watch监听data的数据变化

    目录 watch监听data的数据变化 新问题 解决 1. 先把姓名的值,也加到options里 2. 在监听里增加for循环和判断 watch监听data的数据变化 上一篇里提到了用elementUI的select实现了个远程搜索的功能,最终效果是这样的. 但是继续开发的时候,又遇到了一个新的问题,跟上面的功能有关. 先看下远程搜索的操作,与data里的数据关系. 当输入“张”进行搜索,看到的下拉列表里展示的结果都是存放在data的options: []. 当我选择了一个,比如“张三”,因为s

随机推荐