Question

当我在vue中单击按钮时，如何更改图标。这是部分代码：

<v-btn flat icon color="white">
   <v-icon>star_border</v-icon>
</v-btn>

谢谢

Answer 1

您好，Enzo并祝贺您启动VueJS项目。

我建议您查看有关数据和方法的VueJS文档，以帮助您入门。 https://vuejs.org/v2/guide/instance.html#Data-and-Methods

简而言之，数据是您保留反应性属性的地方，方法是存储功能的地方。

现在，图标的名称已硬编码。您想要做的就是使其具有反应性。所以要更改图标；

您需要将图标的名称绑定到数据中的属性。
定义一个更改该属性值的方法。
进行点击事件以调用函数。

类似这样的东西：

new Vue({
  el: '#app',
  data() {
    return {
      myIcon: 'star_border'
    }
  },
  methods: {
    changeIcon() {
      this.myIcon = 'home'
    }
  }
})

在这里，我定义了一个名为myIcon的属性，该属性最初是“星形边框”。我还创建了一个在此按钮的click-event上调用的方法。此方法将myIcon属性的值更改为“ home”。

您可以在此处查看有效的演示：https://codepen.io/bergur/pen/MLMxzY

Vue Change图标以单击按钮

1 个答案: