javascript - v-绑定(bind) :style with array of styles

Question

我使用 vue 和 v-for 循环来创建跨度。以下是使用 bootstrap4 的背景颜色的一种样式的成功:

<span v-for="(group, index) in item.primary" 
      :key="index" 
      :class="'badge'" 
      :style="{`background-color: ${tagsText[group].color}`">
      {{ group }}
</span>

<script>
    export default {
     data () {
      return {
        tagsText: {
         calling_spirits: {
           color: '#800000',
           text: 'light'
           }
         }};
     }
    };
</script>

我想添加第二种样式(用于文本颜色)但无法使其工作。将跨度样式更改为以下内容后，我没有收到任何错误，也没有样式。

:style="`background-color: ${tagsText[group].color}`, `text-light`">

相同:

:style="`background-color: ${tagsText[group].color}`, `text-${tagsText[group].text}`">

Answer 1

我建议阅读https://v2.vuejs.org/v2/guide/class-and-style.html并理解对象和数组语法。喜欢Shekhar Chikara说你正在将内联样式与类混合。我相信你的模板应该是这样的:

<span
  v-for="(group, index) in item.primary" 
  :key="index" 
  :class="`badge text-${tagsText[group].text}`"
  :style="{ backgroundColor: tagsText[group].color }">
  {{ group }}
</span>

即，text-light是一个CSS类。您应该添加到 span 元素的 class 属性。