[英]How to add to the number for Vue Class Bindings?
I try to put it vue class bindings, but I'm not quite sure how to bindings? I want to add to the class value number, for example class = "allstar50"
, then class Bindingsuse to the v-for
directive to render a list of different color text items? 我尝试将其放在vue类绑定中,但我不确定如何绑定?我想添加到类的值编号上,例如
class = "allstar50"
,然后将类Bindingsuse添加到v-for
指令以呈现不同颜色的文本项列表? jsfiddle here jsfiddle在这里
javascript file: javascript文件:
var vm = new Vue({
el: '#app',
data: {
colors: [
{
title: 'A',
rating:{
stars:"45"
}
},
{
title: 'B',
rating:{
stars:"50"
}
},
{
title: 'C',
rating:{
stars:"40"
}
},
{
title: 'D',
rating:{
stars:"35"
}
}
]
}
})
css: CSS:
.allstar50 {
color: red;
}
.allstar45 {
color: blue;
}
.allstar40 {
color: purple;
}
.allstar35 {
color: green;
}
html: 的HTML:
<div id="app">
<div class="content">
<ul>
<li v-for="item in colors">
<p :class="allstar{{item.rating.stars}}">{{item.title}}</p>
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
In Vue, bindings assume that you're using JS, so the plain text allstar
won't work unless it's a variable. 在Vue中,绑定假定您使用的是JS,因此纯文本
allstar
除非是变量,否则将不起作用。 Additionally, interpolation syntax ( {{ }}
) won't work inside bindings. 此外,插值语法(
{{ }}
)在绑定内部不起作用。
Try the following instead: 请尝试以下操作:
:class="'allstar' + item.rating.stars"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.