Vue动态控制input的disabled属性的方法


Posted in Javascript onJune 26, 2018

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

输入框的html源代码

<el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input>

新增~

Vue动态控制input的disabled属性的方法

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

Vue动态控制input的disabled属性的方法

修改~

Vue动态控制input的disabled属性的方法

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

Vue动态控制input的disabled属性的方法

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

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

总结

以上所述是小编给大家介绍的Vue动态控制input的disabled属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
浅谈Web Storage API的使用
Jun 23 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 #Javascript
vue实现点击关注后及时更新列表功能
Jun 26 #Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 #Javascript
nuxt.js 缓存实践
Jun 25 #Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 #Javascript
浅谈super-vuex使用体验
Jun 25 #Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
建立动态的WML站点(一)
2006/10/09 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
php异常处理方法实例汇总
2015/06/24 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
JS二分查找算法详解
2017/11/01 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
python数字类型math库原理解析
2020/03/02 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
html5 canvas 使用示例
2010/10/22 HTML / CSS
企业读书活动总结
2014/06/30 职场文书
幼儿生日活动方案
2014/08/27 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2014年纪委工作总结
2014/12/05 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
Python Django ORM连表正反操作技巧
2021/06/13 Python
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers