Vue 3与Quasar：动态更换SVG图标的艺术

张开发
• 2026/4/18 6:06:24 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Vue 3与Quasar：动态更换SVG图标的艺术
在现代Web开发中，用户界面（UI）的交互性和动态性是非常重要的。特别是在使用Vue.js和Quasar框架时，如何灵活地管理和更换图标成为了一个常见的需求。今天，我们将探讨如何在Quasar应用中利用Vue 3的计算属性（computed）动态地更换SVG图标。Quasar中的SVG图标Quasar框架提供了丰富的图标库，其中包括Material Design Icons (MDI)。在Quasar中使用SVG图标有几个关键点需要注意：SVG图标的名称必须绑定到q-icon组件的name属性上。当使用computed属性时，返回的图标名称需要是实际的图标引用，而不是字符串。示例：动态更换图标假设我们有一个简单的组件，需要根据某个条件（例如，任务完成状态）来更换图标。下面是实现这个需求的代码：template q-icon :name="iconName" / /template script setup import { computed } from 'vue' import { mdiCheckBold, mdiCloseThick } from '@quasar/extras/mdi-v7' const isTaskCompleted = ref(false) // 假设这个状态是从外部传入的

更多文章