Question

我使用带有v-for循环的vue创建跨度。以下是使用bootstrap4的background-color成功实现一种样式的方法：

<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>

我想添加第二种样式（用于文本颜色），但无法使其正常工作。将span样式更改为以下样式后，我没有错误也没有样式。

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

与：

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

Answer 1

我建议阅读https://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类。您应该将class元素的span属性添加。

v-bind：style与样式数组

1 个答案: