详解Vue.js v-for不支持IE9的解决方法
最近一个小项目,在最后的测试阶段出现了问题,使用了Vue,在Chrome、Firefox、Safari、IE11下都可以访问,唯独IE9下无法正常显示,排除程序问题后,最终判断是Vue的锅,替换版本后解决。经过测试,2.16、2.17 在IE9下无法使用 v-for 导致的。
写了一个简单的demo,在IE9下无法显示列表,运行结果如下:
测试代码如下:
<!DOCTYPE html> <html lang=zh-CN> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>VUE</title> </head> <body> <ul id="list"> <li v-for="item in items">{{ item.name }}</li> </ul> <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script> <script> var $vm = new Vue({ el: '#list', data: { items: [{ name: 'Hello' }, { name: 'World' }] } }); </script> </body> </html>
替换到最新的版本(现在是 2.5.21,地址:https://cdn.bootcss.com/vue/2.5.21/vue.min.js),就可以正常访问了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue.js常用指令之循环使用v-for指令教程
前言 Vue.js中,v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. v-for 可以绑定数据到数组来渲染一个列表: <div id="wantuizhijia"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <sc
-
vue.js指令v-for使用及索引获取
1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <
-
浅谈vue.js中v-for循环渲染
这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="
-
Vue.js常用指令汇总(v-if、v-for等)
有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu
-
vue.js指令v-for使用以及下标索引的获取
在 v-for 代码块中,我们可以完全地访问父级作用域下的属性. v-for 还支持可选的第二个参数,作为当前项的索引. 也可以使用 v-for 来遍历对象的属性. 还可以提供第二个参数,作为对象的键名(key): <body> <div id="box"> <ul> <li @click="onclick(index)" v-for="(item,index) in dataList">{{ite
-
深入浅析Vue.js 中的 v-for 列表渲染指令
1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for. 它的表达式需要结合 in 来使用,类似 item in items 的形式. 1.1 遍历数组 html: <div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> </ul> </div> js: <script> var a
-
vue中的mvvm模式讲解
学习了MVVM模式 起先还觉得有点难,后面与双向数据绑定链接起来还是很容易理解的. 那么什么是MVVM呢? 不明思议咋们肯定和我想的一样 每个单词的首写字母呗! 对没错就是它 Model-View-ViewModel. 可以实现我们的双向数据绑定 下面我来用我的理解解析下它们之间的关系: 哈哈 有点小尴尬哈 先来说下View与Model之间有联系吗? 在MVVM架构下,View 和 Model 之间其实并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel
-
Vue.js中轻松解决v-for执行出错的三个方案
前言 Vue.js 是开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js在近年来受到一定程度的关注,目前在 GitHub上已经有5000+. 本文是笔者在开发实践中踩过的坑,总结和分享出来,希望对大家学习Vue有所帮助.下面来看看详细的介绍: [问题描述] v-for遍历数组中存在空值导致页面报错,情况如下: 开发框架是以Vue为模型绑定的核心,根据错误可以进行一个简单的判断: ▪ removeChild操作既然不是发生在开发者显示
-
vue-cli3 项目从搭建优化到docker部署的方法
1. 创建一个vue项目 相信大部分人都已经知道怎么创建项目的,可以跳过这一节,看下一节. 1.1 安装@vue/cli # 全局安装 vue-cli脚手架 npm install -g @vue/cli 等待安装完成后开始下一步 1.2 初始化项目 vue create vue-cli3-project (1)选择一个预设 可以选择默认预设,默认预设包含了 babel , eslint 我们选择更多功能 Manually select features 回车后来到选择插件 (2)插件选择 这边
-
Vue.js 利用v-for中的index值实现隔行变色
首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果. 以下为完整代码,很简单,但也是个技巧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&
随机推荐
- AngularJS中$watch和$timeout的使用示例
- c#的dllimport使用方法详解
- Lua中对table排序实例
- jquery ui sortable拖拽后保存位置
- vue服务端渲染的实例代码
- 各类Http请求状态(status)及其含义详细解析
- Maven+Tomcat8 实现自动化部署的方法
- .NET 2.0 的压缩功能代码
- 跟老齐学Python之有容乃大的list(2)
- Javascript的常规数组和关联数组对比小结
- 微信小程序 开发MAP(地图)实例详解
- jQuery深拷贝Json对象简单示例
- jQuery如何防止Ajax重复提交
- jquery 动态合并单元格的实现方法
- javascript中普通函数的使用介绍
- javascript options属性集合操作代码
- 分享三种Apache配置虚拟主机的方式
- ubuntu中实现定时弹窗的提醒脚本
- Spring Boot 简介(入门篇)
- 不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决