Vue.js VueJS动态样式

我有一个循环颜色数组的列表，我希望将颜色值绑定到相应名称的颜色样式。例如，INDIANRED的颜色是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)' },
    ],
  }
}

{{redColor.name}
{redColor.hexcode}}}{{redColor.rgbcode}}



数据（）{
返回{
红色：[
{name:'INDIANRED'，十六进制代码：'#CD5C5C'，rgbcode:'RGB（205,92,92）}，
{name:'LIGHTCORAL'，十六进制代码：'#F08080'，RGB代码：'RGB（240128128）}，
{名称：'SALMON'，十六进制代码：'#FA8072'，RGB代码：'RGB（250128114）}，
{name:'DARKSALMON'，十六进制代码：'#E9967A'，rgbcode:'RGB（233150122）}，
{name:'LIGHTSALMON'，十六进制代码：'#CD5C5C'，rgbcode:'RGB（255，160，122）}，
{name:'CRIMSON'，十六进制代码：'#DC143C'，rgbcode:'RGB（220,20,60）}，
{name:'RED'，十六进制代码：'#FF0000'，rgbcode:'RGB（255,0,0）}，
{name:'FIREBRICK'，十六进制代码：'#B22222'，RGB代码：'RGB（178,34,34）'}，
{name:'DARKRED'，十六进制代码：'#8B0000'，rgbcode:'RGB（139,0,0）'}，
],
}
}

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

应该如此

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

{{redColor.name}

什么是“颜色代码不符合我的要求”？你想让它看起来像什么。请参阅close的可能副本。它应该是

：style=“{color:redColor.hexcode}”

。见@thanksd谢谢你的建议！我也是vue.js新手，还没有读过关于类和样式的文章。