在 Vue.js 中,您可以使用 v-if 指令或 v-bind:disabled 指令来实现按钮权限限制和禁用不可点击。
<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
,则按钮将被禁用。
您可以根据自己的需求选择适当的方法来实现按钮权限限制。