写一个vue按钮点击一次后禁用
189浏览 · 2024-04-07 07:30:02
当Vue按钮点击一次后禁用的需求可以通过以下方式实现：
在Vue模板中，给按钮绑定一个点击事件，并通过data属性定义一个变量来控制按钮的禁用状态。当按钮被点击后，将该变量设置为true即可。
```html
<template>
<button @click="disableButton" :disabled="buttonDisabled">点击按钮</button>
</template>
<script>
export default {
data() {
return {
buttonDisabled: false
methods: {
disableButton() {
this.buttonDisabled = true;
</script>
在上述代码中，我们通过`buttonDisabled`变量来控制按钮的禁用状态，默认为false表示按钮可用。当按钮被点击后，`disableButton`方法会将`buttonDisabled`设置为true，从而禁用按钮。
这样，每次点击按钮后，按钮将会变为禁用状态，无法再次点击。