Javascript 在IE 11中循环一段代码

对于一个项目，我需要循环遍历javascript中给定的对象列表，并在html表中水平显示它们。示例如下：

html:

在实际项目中，“车”的长度未知，因此循环是不可避免的。 您可以看到该示例在Chrome和Firefox中运行良好，但在IE中不起作用

联系Vue开发团队后，他们告诉我IE的“tr”中根本不接受模板标记，我需要使用基于字符串的模板。然而，在对Vue组件进行实验之后，Vue也不允许在一个模板中包含多个根元素。 此处链接到Vue票证（已关闭）：

---

要做到这一点并使其在IE上也能正常工作，有什么好方法呢？

编辑：不要读这篇文章，它只适用于Vue 1

我认为你目前无法做到这一点。IE根本不允许模板标记，因此唯一的方法是使用

，并有一个单独的组件（带有一个根元素），可以应用于

tr

或

td

。无法循环通过每个元素并在每个元素中添加3个

td

s

---

同样，当前的解决方案是在

tr

或

td

上使用

is

属性，但这不允许您请求的多根组件。也许您可以为每辆车创建一个组件，然后执行

，然后将TD设置为3列样式。

Evan在问题中给出了答案。使用一个

newvue({
el:“#应用程序”，
模板：“\
\
{{body.title}}\
\
\
\
{{car.make}\
{{car.model}}\
{{car.year}\
\
\
\
",
数据：{
正文：{title:'测试标题'，
汽车：[{制造：本田，型号：思域，年份：2010}，
{品牌：'Toyota'，车型：'Camry'，年份：2012}，
{品牌：'Nissan'，车型：'Versa'，年份：2014}]}
}
})

虽然看起来很难看，但它在IE中确实有效。你也可以写一篇文章

渲染：函数（h）{
let cells=[]
对于（var i=0；i

Evan发现您将组件声明为html，然后将Vue安装到其中。这就是IE11的问题所在：浏览器首先处理html，然后才了解Vue，当它到达

template

标记时，浏览器会出现严重错误，然后再处理js。为了让IE处理模板标记，您必须从Vue将其提供给浏览器，以便Vue能够进行解释。这就是为什么建议使用基于字符串的模板：Vue将模板作为字符串，然后提供浏览器HTML来显示

然后，正如您所了解的，Vue对于一个模板只能有一个根元素。解决方案是在有一个根元素之前一直退出DOM树。在本例中，我建议将整个表作为模板。那么你会：

javascript:

Vue.component('car-table', {
  data: function () {
      return {
        title: 'test title',
        cars: [{
          make: 'Honda',
          model: 'Civic',
          year: 2010
        }, {
          make: 'Toyota',
          model: 'Camry',
          year: 2012
        }, {
          make: 'Nissan',
          model: 'Versa',
          year: 2014
        }]
      };
    },
    template: '\
    <table>\
        <thead>\
        <tr>\
            <td colspan="5">{{title}}</td>\
        </tr>\
      </thead>\
      <tbody>\
        <tr>\
          <template v-for="car in cars">\
          <td>{{car.make}}</td><td>{{car.model}}</td><td>{{car.year}}</td>\
          </template>\
        </tr>\
      </tbody>\
    </table>',
});

new Vue({
  el: '#app',
});

Vue.component（'car-table'{
数据：函数（）{
返回{
标题：'测试标题'，
汽车：[{
制造‘本田’，
模型：“公民”，
年份：2010年
}, {
制造：“丰田”，
车型：“凯美瑞”，
年份：2012年
}, {
制造：“日产”，
模型：“Versa”，
年份：2014年
}]
};
},
模板：'\
\
\
\
{{title}}\
\
\
\
\
\
{{car.make}{{car.model}{{{car.year}}\
\
\
\
',
});
新Vue({
el:“#应用程序”，
});

和html：

<div id="app">
  <car-table></car-table>
</div>

---

我已经更新了以反映这一点。

很酷的答案。我知道Vue 2已更改为允许渲染功能，但没有意识到它解锁了此类行为。

new Vue({
  el: '#app',
  template: "\
  <table>\
  <thead><tr><td colspan='5'>{{body.title}}</td></tr></thead>\
  <tbody>\
    <tr>\
      <template v-for='car in body.cars'>\
        <td>{{car.make}}</td>\
        <td>{{car.model}}</td>\
        <td>{{car.year}}</td>\
      </template>\
    </tr>\
  </tbody>\
  </table>",
  data: {
    body: {title : 'test title',
    cars: [{make: 'Honda', model: 'Civic', year: 2010},
    {make: 'Toyota', model: 'Camry', year: 2012},
    {make: 'Nissan', model: 'Versa', year: 2014}]}
  }
})

render: function(h){
  let cells = []
  for (var i=0; i < this.body.cars.length; i++){
    cells.push(h("td", this.body.cars[i].make))
    cells.push(h("td", this.body.cars[i].model))
    cells.push(h("td", this.body.cars[i].year)) 
  }

  let header = h("thead", [h("tr", [h("td", {attrs: {colspan: 5}}, [this.body.title])])])
  let body = h("tbody", [h("tr", cells)])

  return h("table", [header, body])
}

Vue.component('car-table', {
  data: function () {
      return {
        title: 'test title',
        cars: [{
          make: 'Honda',
          model: 'Civic',
          year: 2010
        }, {
          make: 'Toyota',
          model: 'Camry',
          year: 2012
        }, {
          make: 'Nissan',
          model: 'Versa',
          year: 2014
        }]
      };
    },
    template: '\
    <table>\
        <thead>\
        <tr>\
            <td colspan="5">{{title}}</td>\
        </tr>\
      </thead>\
      <tbody>\
        <tr>\
          <template v-for="car in cars">\
          <td>{{car.make}}</td><td>{{car.model}}</td><td>{{car.year}}</td>\
          </template>\
        </tr>\
      </tbody>\
    </table>',
});

new Vue({
  el: '#app',
});

<div id="app">
  <car-table></car-table>
</div>