0
点赞
收藏
分享

微信扫一扫

Vue进阶(六十):console.info() 方法 及 v-loading 实现加载效果

实例 在控制台上输出信息:

console.info("Hello Runoob!");

定义和用法 console.info() 方法用于在控制台输出信息。

该方法对于开发过程进行测试很有帮助。

提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台)。

语法

console.info(message)

浏览器支持 在这里插入图片描述 表格中的数字表示支持该方法的第一个浏览器版本号。

方法

console.info()	Yes	8.0	4.0	Yes	Yes

参数说明 参数 类型 描述 message StringObject 必需,控制台上要显示的信息。

实例 使用对象作为输出的信息:

var myObj = { name : "菜鸟教程", site : "www.runoob.com" };
console.info(myObj);

实例 使用数组作为输出的信息:

var myArr = ["Google", "Taobao", "Runoob", "Facebook" ];
console.info(myArr);

使用v-loading在接口未请求到数据之前,显示加载中,直到请求到数据后消失。

//全局loading
<template>
   <div v-loading="loading"> </div>
</template>

data 中定义初始化, loading: false,同时在mounted()中将 this.loading设置为true,再去请求接口.,

在接口的回调函数中,将 this.loading 设为false,到达加载动画效果。

如果写在template下的顶层元素上的话,就不会触发全屏loading

// 局部loading
<template>
    <div> 
        <section v-loading="loading"></section>
    </div>
</template>

一、前言

最近做的一个项目是基于chrome开发的,又来要求是要兼容ie8 ie9 ie10 ie11;那么问题来了,好多样式行为都千奇百怪的出现,后来发现,将文档模式调为标准之后,才差不多ok;那么我怎么才能确保用户打开时,文档模式是标准的呢;而且是不是ie7的标准呢?

二、IE 浏览器模式 和 文档模式的区别

1.浏览器模式

用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理(User_Agent)字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能,就可以向不同的浏览器返回不同的页面内容。

2.文档模式 用于指定IE的页面排版引擎(Trident)以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新,但不会更改用户代理字符串中的版本号,也不会从服务器重新下载网页。切换浏览器模式的同时,浏览器也会自动的切换到相应的文档模式。

三、解决方法

第一步,将代码设置成html5的模式,那么用户打开项目之后,文档模式就是标准的;即不会是ie5Qurik模式;但有可能是ie7标准模式;

第二步,

2.1 在html head中写上这句代码,即可时文档模式为你浏览器最高级别的模式;<meta http-equiv="X-UA-Compatible" content="IE=edge" />

2.2 若你想以ie8的标准模式打开,就写成<meta http-equiv=X-UA-Compatible content=”IE=EmulateIE8“>

2.3 若你想要以他的文档模式ie10的打开,浏览器级别低于10的就以浏览器本身最高的方式打开,那么你要写这2句话(顺序不能错):<meta http-equiv=X-UA-Compatible content=“IE=EmulateIE10”>;<meta http-equiv="X-UA-Compatible" content="IE=edge" />

原因,优先级是第一句,但第一句执行不了,再执行第二句;

第三、补充两点,1.若您的代码在jsp环境中,通过iframe的形式展示的,上面代码写在common.jsp或者您的basic.jsp即可;

2.经我实践证明这句:<meta http-equiv=X-UA-Compatible content=”IE=10“>无效,必须写成IE=EmulateIE10

3.写多个文档模式,这样即可<meta http-equiv=”X-UA-Compatible” content=”EmulateIE8,EmulateIE10″>

举报

相关推荐

0 条评论