博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue动态控制input的disabled属性
阅读量:7260 次
发布时间:2019-06-29

本文共 442 字,大约阅读时间需要 1 分钟。

有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢?

输入框的html源代码

新增~

图片描述

通过F12查看实际页面渲染代码

图片描述

修改~

图片描述

通过F12查看实际页面渲染代码

图片描述

主要是通过 v-bind:disabled 绑定 dataForm.id 的值来动态判断是否添加 disabled 属性,而 dataForm.id 的默认初始值为0,新增时不会添加此属性;当点击修改时,dataForm.id 的值就是当前所要修改的数据记录的id,此时id不为0,因此 disabled 属性值就被设为 disabled,输入框也就无法修改

虽然说这样是有效的,但是只是页面的一个障眼法,如果去掉这个 disabled 属性,还是可以更改值的,关键是看后端业务逻辑如何处理,一种方法是前端页面针对修改操作时,不传 配置项
的值,另一种方法是前端传值,但是后端不进行处理

转载地址:http://uakdm.baihongyu.com/

你可能感兴趣的文章
Vim statusline设置
查看>>
蒙特卡罗算法并行计算
查看>>
Linq To Sql数据库操作基类实现不同条件的增删改查
查看>>
IDEA使用
查看>>
Length of Last Word
查看>>
Python与机器人技术
查看>>
Android 屏幕兼容性
查看>>
JDK 新特性
查看>>
正则表达式_matches(Regex)
查看>>
log代替system.out.println输出
查看>>
对象和数组的遍历方法
查看>>
Jmeter之root ca certificate 问题
查看>>
使用for--each遍历集合
查看>>
MySQL双主+keeplived安装部署说明
查看>>
基于HWND的Win32 UI自动化
查看>>
WebService 入门程序(一)
查看>>
深入计算机系统 练习题2.44 补码运算
查看>>
python 在linux下读取 .xlsx
查看>>
Java 学习 面向对象学习
查看>>
创建一个git仓库
查看>>