I just want to write class plan__part_${this.res} within element

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

CodePudding user response：

As you can see in following snippet your code working fine, don't use this in template:

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

For this case if your current implementation is not working then you can try using computed

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

and in

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

Note: this.flag is actually the boolean that you have used in the template