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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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
php csv操作类代码
2009/12/14 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Python中的迭代器漫谈
2015/02/03 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python fabric使用笔记
2015/05/09 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
表扬信格式
2014/01/12 职场文书
法人授权委托书格式
2014/04/08 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang