Vuetify 2→3迁移：带v-if的v-list-item-icon如何处理？

不用写成icon="{{v-if={{item.icon}}}}"这种错误格式，Vuetify 3 对v-list-item的icon属性做了优化：

• 当你把icon绑定为item.icon时，如果item.icon不存在（值为null/undefined/空值），组件会自动不渲染图标，完全替代 Vuetify 2 里给<v-list-item-icon>加v-if="item.icon"的场景。

代码对比 #

Vuetify 2 写法

<v-list-item>
  <v-list-item-icon v-if="item.icon">
    <v-icon>{{ item.icon }}</v-icon>
  </v-list-item-icon>
  <v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>

Vuetify 3 写法

<v-list-item :icon="item.icon">
  <v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>

直接绑定icon属性即可，无需额外编写条件判断，组件内部会自动处理图标是否渲染的逻辑。

内容的提问来源于stack exchange，提问作者user3534080