在开发nuxt项目的时候,我们难免会使用到document来获取dom元素。如果直接在文件中使用就会报错。这是因为document是浏览器端的东西服务端并没有。

解决方法:

我们只需要在使用的地方通过process.browser/process.server来判断

如下:

if (process.browser) {
let myVideo = document.getElementById('mini_video');
if (myVideo) {
if (!this.videoShow) {
myVideo.pause();
} else {
myVideo.play();
}
}
}

nuxt.js实战之window和document对象的使用的更多相关文章

  1. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  2. Window及document对象的区别

    一.Window对象 -------------------------------------------------- ------------------- 对象属性 window //窗户自身 ...

  3. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  4. Window及document对象

    注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写 否则会提示你1个错误信息 "引用的元素为空或者不是对象" 一.Window对象 ---------- ...

  5. nuxt.js实战之引入jquery

    head: { title: 'nuxt', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-widt ...

  6. nuxt.js实战之移动端rem

    nuxt.js的项目由于是服务端渲染,通过js动态调整不同尺寸设备的根字体这种rem方案存在一种缺陷.由于设置字体的代码不能做服务端渲染,导致服务端返回的代码一开始没有相应的跟字体,直到与前端代码进行 ...

  7. nuxt.js实战之用vue-i18n实现多语言

    一.实现步骤 1.安装vue-i18n并且创建store.js(vuex状态管理)文件 2.创建一个(middleware)中间件,用来管理不同的语言 3.创建不同语言的json文件作为语言包(例如: ...

  8. nuxt.js实战踩坑记录

    读万卷书不如行万里路,必须实践出真理! 看官方文档安装项目vue init nuxt-community/starter-template <project-name>注意:这是新手项目不 ...

  9. nuxt.js实战之开发环境配置

    一.创建项目 1.使用如下命令生成项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 2.进入到项目根目录下,使用np ...

随机推荐

  1. C# 类如何声明索引器以提供对类的类似数组的访问的代码

    研发期间,将内容过程中比较常用的内容段做个收藏,如下内容内容是关于 C# 类如何声明索引器以提供对类的类似数组的访问.的内容,希望能对各位有用处. using System;using System. ...

  2. adb server is out of date. killing完美解决

    原本是想跑monkey测试的,可使用adb命令时提示:adb server is out of date. killing... 出现这个问题的原因是:adb使用的端口5037被占用了.下面我们说下如 ...

  3. 会话固定攻击 - yxcms session固定漏洞

    目录 会话固定攻击 e.g. yxcms session固定攻击 分析 了解更多 会话固定攻击 Session fixation attack(会话固定攻击)是利用服务器的session不变机制,借他 ...

  4. 使用 Dashboard - 每天5分钟玩转 Docker 容器技术(174)

    上一节我们完成了 Kubernetes Dashboard 的安装,本节就来实践一下. Dashboard 界面结构 Dashboard 的界面很简洁,分为三个大的区域. 顶部操作区在这里用户可以搜索 ...

  5. 【原】Java学习笔记024 - 包装类

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 之前对于基本数据类 ...

  6. Navicat如何导出Excel格式表结构

    SELECTCOLUMN_COMMENT 字段名,COLUMN_NAME code,COLUMN_TYPE 数据类型,DATA_TYPE 字段类型,CHARACTER_MAXIMUM_LENGTH 长 ...

  7. 我的第一个python web开发框架(24)——系统重构与ORM

    小白弄完代码版本管理和接口文档后,兴奋的找到老菜. 小白:老大,我已经按你讲的要求,将代码版本管理和接口文档都搞好了.从项目开始到现在,除了代码编写,感觉学会好多东西啊. 老菜:嗯嗯,实战确实需要掌握 ...

  8. JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...

  9. springboot中配置过滤器以及可能出现的问题

    在springboot添加过滤器有两种方式: 1.通过创建FilterRegistrationBean的方式(建议使用此种方式,统一管理,且通过注解的方式若不是本地调试,如果在filter中需要增加c ...

  10. R语言学习——因子

    变量可分为名义型变量.有序型变量或者连续型变量.名义型变量是没有顺序之分的类别变量,如糖尿病类型Diabetes(Type1.Type2),即使在数据中Type1编码为1而Type2编码为2,这也并不 ...