详解Vue.js v-for不支持IE9的解决方法

2024-12-19 07:42:57

最近一个小项目，在最后的测试阶段出现了问题，使用了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 列表渲染指令

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.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-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循环渲染

这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="
Vue.js中轻松解决v-for执行出错的三个方案

前言 Vue.js 是开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js在近年来受到一定程度的关注,目前在 GitHub上已经有5000+. 本文是笔者在开发实践中踩过的坑,总结和分享出来,希望对大家学习Vue有所帮助.下面来看看详细的介绍: [问题描述] v-for遍历数组中存在空值导致页面报错,情况如下: 开发框架是以Vue为模型绑定的核心,根据错误可以进行一个简单的判断: ▪ removeChild操作既然不是发生在开发者显示
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中的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&
vue中的mvvm模式讲解

学习了MVVM模式起先还觉得有点难,后面与双向数据绑定链接起来还是很容易理解的. 那么什么是MVVM呢? 不明思议咋们肯定和我想的一样每个单词的首写字母呗! 对没错就是它 Model-View-ViewModel. 可以实现我们的双向数据绑定下面我来用我的理解解析下它们之间的关系: 哈哈有点小尴尬哈先来说下View与Model之间有联系吗? 在MVVM架构下,View 和 Model 之间其实并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel
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-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不支持IE9的解决方法

相关推荐

随机推荐