element-ui 动态设置disabled

时间:2024-10-13 21:41:53

1、双击打开HBuilderX开发工具,下载和安装vue项目,并安装element-ui

element-ui 动态设置disabled

2、点击文件,新建vue文件DisabledComponents.vue,然后点击创建

element-ui 动态设置disabled

3、打开已新建的文件,插入一个el-form元素,并在内部添加el-input和el-switch

element-ui 动态设置disabled

4、在script标签中,初始化变量,然后定义开关控件的change事件

element-ui 动态设置disabled

5、打开项目中的App.vue文件,导入组件DisabledComponents,然后在界面上引用

element-ui 动态设置disabled

6、保存代码并运行项目,打开浏览器,查看界面效果,这时输入框被禁止编辑

element-ui 动态设置disabled

7、切换开关控件,转换到启用状态;可以发现输入框可以编辑

element-ui 动态设置disabled
© 手抄报圈