將數據對象的屬性綁定到 DOM 元素的屬性

Question

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

HTML

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

JS

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'
      }
    ]
  }
})

我想要發生的是將每個className的值綁定到每個 DOM 元素的 class 屬性。 我希望有人可以糾正我。

Answer 1

使用v-bind時，您不需要使用{{...}}語法，因為Vue 已經假定您將要使用某種屬性或對象。

因此，例如，您可以像這樣簡單地輸出每個className的值：

<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>

或者，如果課程總是遵循item-i的模式：

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