vue.js - 用 Vuejs 绑定颜色
问题描述
我想用 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'
}
]
}
}
我怎样才能做到这一点?
解决方案
你不应该使用:
<v-icon color="{{ navtab.color }}">{{ navtab.icon }}</v-icon>
相反,绑定变量颜色:
<v-icon :color="navtab.color">{{ navtab.icon }}</v-icon>
推荐阅读
- ios - iOS 15:如何获取 SystemVolumeDidChange 通知
- typescript - 更改 io-ts Codec.struct 中一个属性的编解码器
- javascript - 是否可以在代码沙箱中运行单元测试命令
- python - 清理和组织 Twitter 数据 python
- patch - 为什么我在修补 dwm 时出错?
- java - 由于错误警告,通过 ETL Tool 在 Neo4j 中导入数据失败
- python - div通过python图像
- amazon-web-services - 与 AWS 后端进行本机反应 - 设置调度程序
- typescript - 如何在 TypeScript 的 for..of 循环中声明和解构元组数组?
- php - sql有一些问题(参数号无效:参数未定义)