vue中打开和关闭按钮的切换

Question

我是 Vue 的新手，正在尝试执行以下功能。

我在页面的导航栏中有一个打开按钮（图标）。单击时，应将其更改为关闭图标并加载新模板（在同一页面内）。当我们点击关闭图标时，它应该再次变为打开图标并返回到之前的模板。

谁能帮帮我！

Answer 1

您可能需要对其进行调整，但这是我的想法

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <div>
        <v-btn outline @click="changeIcon" color="primary" dark>Accept
          <v-icon dark right>{{icon}}</v-icon>
        </v-btn>
      </div>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  data: {
      icon: "check_circle"
  },
    methods: {
        changeIcon() {
            this.icon = (this.icon === "check_circle" ? "block" : "check_circle")
        }
    }
})

演示：https://codepen.io/LENNY74/pen/qBRJXWZ

vue中打开和关闭按钮的切换

Change between open and close buttons in vue

vue.js

vuetify.js