Question

我有一个循环颜色数组的列表，我希望将颜色值绑定到相应名称的颜色样式。例如，INDIANRED的颜色为印度红色。不幸的是，文本颜色名称没有我想要的样式颜色。帮助赞赏。

<ul>
  <li v-for="redColor in redColors">
  <p v-bind:style="{ color: '{{redColor.hexcode}}' }">{{redColor.name}}</p>   {{redColor.hexcode}} {{redColor.rgbcode}}
    <hr>
  </li>
</ul>


data () {
  return {
    redColors : [
      {name: 'INDIANRED', hexcode:'#CD5C5C', rgbcode:'RGB(205,92,92)' },
      {name: 'LIGHTCORAL', hexcode:'#F08080', rgbcode:'RGB(240, 128, 128)' },
      {name: 'SALMON', hexcode:'#FA8072', rgbcode:'RGB(250, 128, 114)'},
      {name: 'DARKSALMON', hexcode:'#E9967A', rgbcode:'RGB(233, 150, 122)' },
      {name: 'LIGHTSALMON', hexcode:'#CD5C5C', rgbcode:'RGB(255, 160, 122)' },
      {name: 'CRIMSON', hexcode:'#DC143C', rgbcode:'RGB(220, 20, 60)' },
      {name: 'RED', hexcode:'#FF0000', rgbcode:'RGB(255, 0, 0)' },
      {name: 'FIREBRICK', hexcode:'#B22222', rgbcode:'RGB(178, 34, 34)' },
      {name: 'DARKRED', hexcode:'#8B0000', rgbcode:'RGB(139, 0, 0)' },
    ],
  }
}

Answer 1

在v-bind中，您应该编写javascript表达式，但不能编写字符串或模板字符串。

所以它应该是

<p v-bind:style="{ color: redColor.hexcode }">{{redColor.name}}</p>

VueJS动感风格

1 个答案: