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 already assumes您将需要使用某种属性或对象。

所以你可以输出每个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>

将数据对象的属性绑定到DOM元素的属性

1 个答案: