我是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属性。我希望有人可以纠正我。
答案 0 :(得分:0)
使用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>