如何在 Vue 中的 html 元素内使用带有变量的 class？

Question

我只想在元素

内写classplan__part_${this.res}

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

Answer 1

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

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

并在

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

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

Answer 2

正如您在以下代码片段中看到的那样，您的代码运行良好，请不要在模板中使用 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>

如何在 Vue 中的 html 元素内使用带有变量的 class？

How to make class with with variable inside of html element in Vue?

html

vue.js

vuejs2