Как создать класс с переменной внутри html — элемента в Vue?

#html #vue.js

Вопрос:

Я просто хочу написать класс plan__part_${this.res} внутри элемента

 v-bind:class="{[`plan__part_${this.res}`]: true }" :key="item.id" gt;lt;/divgt;```  

Ответ №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; } 
 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;div id="demo"gt;   lt;div :class="{[`plan__part_${res}`]: true }" :key="item.id"gt;  {{ res }}  lt;/divgt; lt;/divgt; 

Ответ №2:

В этом случае, если ваша текущая реализация не работает, вы можете попробовать использовать вычисленные

 v-bind:class="getClass" :key="item.id" gt;lt;/divgt;  

и в

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

Примечание: this.flag на самом деле это логическое значение, которое вы использовали в шаблоне