Javascript 将数据对象的属性绑定到DOM元素'；s属性

我是Vue.js的新手。我的HTML和JS文件中有以下代码行：

HTML

---

我要做的是将每个

className

的值绑定到每个DOM元素的class属性。我希望有人能纠正我的错误。

在使用

v-bind

时，您不需要使用

{…}

语法，因为您需要使用某种属性或对象

例如，您可以像下面这样简单地输出每个

className

的值：

<li v-for="item in items" v-bind:class="item.className">{{item.text}}</li>

var app = new Vue({
  el: '#app',
  data: {
    items: [
      {
        className: 'item-1',
        text: 'Item 1'
      },
      {
        className: 'item-2',
        text: 'Item 2'
      },
      {
        className: 'item-3',
        text: 'Item 3'
      }
    ]
  }
})

<li v-for="item in items" v-bind:class="item.className">{{item.text}}</li>

<li v-for="item in items" :class="item.className">{{item.text}}</li>

<li v-for="item, i in items" :class="`item-` + i">{{item.text}}</li>