使用v-for将数组映射到元素到html属性

Question

如果有可能的插入元素将数组映射到像这样的html元素吗？

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

我使用该指令基于数组呈现项目列表。

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

和vue把这个扔给我：

<ul id="example-1">
  <li>
    <div class ="{{ item.message }}">
    </div>
    <div class ="{{ item.message }}">
    </div>
  </li>
</ul>

我怎么能用vue做到这一点？

Answer 1

你的语法已关闭;不要在属性中使用{{}}，请使用v-bind指令或简称:：

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

或更简单：

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