使用 Vuejs 绑定颜色

Question

我想用for循环给图标颜色。我已经尝试过这种方式。但没有得到任何结果。我知道绑定样式是可能的。

<v-tab v-for="navtab in navtabs" :key="navtab">
    <v-icon color="{{ navtab.color }}">{{ navtab.icon }}</v-icon>
</v-tab>

数据属性：

<script>
export default {
    data () {
      return {
      navtabs: [
        {
          icon: 'info',
          name: 'About Book',
          color: 'teal darken-2'
        },
        {
          icon: 'favorite',
          name: 'Specification',
          color: 'orange darken-2'
        }
      ]
   }
}

我该怎么做？

Answer 1

你不应该使用：

<v-icon color="{{ navtab.color }}">{{ navtab.icon }}</v-icon>

相反，绑定变量颜色：

<v-icon :color="navtab.color">{{ navtab.icon }}</v-icon>