Vue改变图标点击按钮答案

【问题标题】：Vue Change icon to click on the buttonVue改变图标点击按钮
【发布时间】：2019-02-22 18:09:41
【问题描述】：

点击vue中的按钮时如何更改图标。以下是部分代码：

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

谢谢

【问题讨论】：

标签： vue.js onclick vuetify.js

【解决方案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 的属性，起初它是“star-border”。我还创建了一个在此按钮的单击事件上调用的方法。此方法将 myIcon 属性的值更改为“home”。

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

【讨论】：

【解决方案2】：

<v-btn @click="show = !show" icon>
    <v-icon>{{ !show ? 'mdi-eye' : 'mdi-close' }}</v-icon>
</v-btn>

添加到组件

{
    data(){ 
        return {
            show:false
        }
    }
}

【讨论】：