vs做网站如何输出建立专业的官方网站

如果你正在使用 Vue 3 和 Composition API，你可以使用 setup 函数来实现 Element Plus 的 Input 组件在点击查看按钮时不可编辑，点击编辑按钮时可编辑的功能。

以下是一个使用 setup 的示例代码：

<template><div><el-input v-model="inputValue" :disabled="isDisabled"></el-input><el-button @click="toggleEdit">{{ isDisabled ? '编辑' : '查看' }}</el-button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const inputValue = ref('');const isDisabled = ref(true);function toggleEdit() {isDisabled.value = !isDisabled.value;}return {inputValue,isDisabled,toggleEdit};}
};
</script>

在上述示例中，我们使用了 ref 函数来创建 inputValue 和 isDisabled 变量，并在 setup 函数中返回它们。通过在模板中绑定 v-model 指令和 :disabled 属性，我们可以动态地控制输入框是否可编辑。

在按钮的点击事件处理函数 toggleEdit 中，我们只需要修改 isDisabled 变量的值，输入框的可编辑