vue3 权限按钮 通过数据的权限标识来控制按钮的显示和隐藏

如果你的权限标识是存储在数据中的，你可以通过计算属性或者方法来实现权限按钮的控制。

假设你有一个 `user` 对象，其中包含了当前用户的权限信息，你可以在组件中定义一个计算属性 `hasPermission`，用来判断当前用户是否有权限操作某个功能。然后在模板中，将 `v-if` 绑定到 `hasPermission` 计算属性上，根据计算属性的返回值来控制按钮的显示和隐藏。

示例代码：

<template>
  <button v-if="hasPermission('edit')" @click="handleEdit">编辑</button>
</template>

<script>
export default {
  data() {
    return {
      user: {
        permissions: ['edit', 'delete']
      }
    }
  },
  computed: {
    hasPermission() {
      return (permission) => {
        return this.user.permissions.includes(permission);
      }
    }
  },
  methods: {
    handleEdit() {
      // 编辑操作
    }
  }
}
</script>

上面的示例中，我们定义了一个计算属性 `hasPermission`，它返回一个函数，这个函数接收一个参数 `permission`，用来判断当前用户是否有操作权限。在模板中，我们使用 `v-if` 指令将按钮绑定到 `hasPermission` 计算属性上，根据计算属性的返回结果来控制按钮的显示和隐藏。

需要注意的是，这里使用了箭头函数来定义 `hasPermission`，这是因为箭头函数可以保留当前组件实例的上下文，这样我们就可以在函数中访问到 `this.user` 对象。如果使用普通的函数定义方式，函数内部的 `this` 指向的是全局对象，访问不到组件实例的数据。