Vue中如何通过v-for将映射数组渲染为元素并正确绑定属性？

嘿，我来帮你搞定这个Vue的问题～你现在遇到的问题主要是两个细节没处理对，咱们一步步来修正：

问题分析 #

你当前的代码有两个关键问题：

1. 属性绑定用了错误的语法：Vue里绑定HTML属性不能直接用双大括号{{ }}，这种插值方式只适合在元素内容里使用，用在属性上不仅不会生效，还会导致渲染异常。
2. v-for的位置不对：从你给出的渲染结果来看，v-for的应用位置出错了，导致循环生成的是<div>而非<li>，才出现了一个<li>里塞两个<div>的情况。

正确实现代码 #

首先你的Vue实例代码是没问题的，保留即可：

var example1 = new Vue({ 
  el: '#example-1', 
  data: { 
    items: [ 
      { message: 'Foo' }, 
      { message: 'Bar' } 
    ] 
  } 
})

然后修改模板部分，这是核心：

<ul id="example-1">
  <!-- 把v-for放在<li>上，确保每个数组元素对应一个独立的<li> -->
  <li v-for="item in items" :key="item.message">
    <!-- 用v-bind:class的简写:class来绑定类名，这是Vue绑定属性的正确方式 -->
    <div :class="item.message">
    </div>
  </li>
</ul>

关键细节解释 #

• :class的作用：它会把item.message的实际值（比如Foo、Bar）作为类名绑定到<div>上，最终渲染出的HTML会是<div class="Foo">和<div class="Bar">，而不是保留{{ item.message }}的字符串形式。
• v-for的位置：把循环指令放在<li>上，这样数组里的每一项都会生成一个单独的<li>，每个<li>里包含对应的<div>，符合你最初想要的“数组元素对应HTML元素”的需求。
• :key的必要性：Vue要求使用v-for时必须绑定唯一的key值，这能帮助Vue准确跟踪每个元素的身份，避免出现重复渲染、顺序混乱等问题，这里用item.message作为key（前提是每个message值都是唯一的）。

特殊场景补充（如果需要） #

如果你确实想要在一个<li>里生成多个<div>（虽然从HTML语义来说，<ul>的直接子元素应该是<li>，不太推荐这种写法，但技术上是可行的），那只要把v-for移到<div>上即可：

<ul id="example-1">
  <li>
    <div v-for="item in items" :key="item.message" :class="item.message">
    </div>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者CESAR NICOLINI RIVERO