使用vue写一个修改图书的名字的按钮

好的，这是一个简单的示例：

在你的Vue组件中，你需要先定义一个data属性来存储图书的名字：

<template>
  <div>
    <p>当前图书名字：{{ bookName }}</p>
    <button @click="showEditForm">修改图书名字</button>
    <div v-if="showForm">
      <input v-model="newName" type="text">
      <button @click="updateName">保存</button>
      <button @click="hideForm">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookName: 'JavaScript高级程序设计',
      showForm: false,
      newName: ''
    }
  },
  methods: {
    showEditForm() {
      this.showForm = true
    },
    hideForm() {
      this.showForm = false
    },
    updateName() {
      this.bookName = this.newName
      this.showForm = false
    }
  }
}
</script>

在这个例子中，我们先在data属性中定义了一个bookName变量来存储图书的名字，同时定义了一个showForm变量来表示是否显示修改表单，以及一个newName变量来存储用户输入的新的图书名字。

在模板中，我们展示了当前的图书名字，以及一个按钮用来显示修改表单。如果用户点击了修改图书名字按钮，我们就将showForm变量设置为true，从而显示修改表单。表单中包含一个输入框和两个按钮，一个用来保存修改后的名字，另一个用来取消修改。

在methods中，我们定义了三个函数，showEditForm用来显示修改表单，hideForm用来隐藏修改表单，updateName用来保存新的图书名字。当用户点击保存按钮时，我们将newName变量的值赋给bookName变量，从而完成图书名字的更新。