如何使类与html元素中的变量在Vue?

Question

我只想写classplan__part_${this.res}在元素

v-bind:class="{[`plan__part_${this.res}`]: true }"
:key="item.id"
></div>```

Answer 1

从下面的代码片段可以看到，您的代码运行良好，不要在模板中使用this:

new Vue({
el: '#demo',
data() {
return {
res: '1',
item: {id: 1}
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false

.plan__part_1{
background: violet;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">     
<div :class="{[`plan__part_${res}`]: true }" :key="item.id">
{{ res }}
</div>
</div>

Answer 2

对于这种情况，如果您当前的实现不工作，那么您可以尝试使用computed

v-bind:class="getClass"
:key="item.id"
></div>

和

computed: {
getClass() { 
if(this.flag) return `plan__part_${this.res}`;
return '';
}

注意:this.flag实际上是你在模板 中使用的布尔值