vue按钮权限限制 禁用不可点击

在 Vue.js 中,您可以使用 v-if 指令或 v-bind:disabled 指令来实现按钮权限限制和禁用不可点击。

  • 使用 v-if 指令:
  • <template>
      <button v-if="hasPermission" @click="handleClick">Click Me</button>
    </template>
    <script>
    export default {
      data() {
        return {
          hasPermission: true
      methods: {
        handleClick() {
          console.log("Button clicked");
    </script>
    

    在上面的代码中,如果 hasPermission 的值为 true,则按钮将显示;如果为 false,则按钮将不显示。

  • 使用 v-bind:disabled 指令:
  • <template>
      <button :disabled="!hasPermission" @click="handleClick">Click Me</button>
    </template>
    <script>
    export default {
      data() {
        return {
          hasPermission: true
      methods: {
        handleClick() {
          console.log("Button clicked");
    </script>
    

    在上面的代码中,如果 hasPermission 的值为 true,则按钮将可用;如果为 false,则按钮将被禁用。

    您可以根据自己的需求选择适当的方法来实现按钮权限限制。

  •