Vue动态控制input的disabled属性的方法
更新时间：2018年06月26日 10:31:11 作者：十方
这篇文章主要介绍了Vue动态控制input的disabled属性的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？
输入框的html源代码
<el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input>
新增~
通过F12查看实际页面渲染代码
修改~
通过F12查看实际页面渲染代码
主要是通过 v-bind:disabled 绑定 dataForm.id 的值来动态判断是否添加 disabled 属性，而 dataForm.id 的默认初始值为0，新增时不会添加此属性；当点击修改时，dataForm.id 的值就是当前所要修改的数据记录的id，此时id不为0，因此 disabled 属性值就被设为 disabled，输入框也就无法修改
虽然说这样是有效的，但是只是页面的一个障眼法，如果去掉这个 disabled 属性，还是可以更改值的，关键是看后端业务逻辑如何处理，一种方法是前端页面针对修改操作时，不传 配置项 的值，另一种方法是前端传值，但是后端不进行处理
总结
以上所述是小编给大家介绍的Vue动态控制input的disabled属性，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了vue项目设置活性字体过程(自适应字体大小)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vuex-Persist 是一个用于在 Vuex 中实现持久化状态的库,它可以用来解决应用程序在刷新浏览器或关闭页面后丢失 Vuex store 中状态的问题,本文给大家介绍vuex-persist 可以用来干什么,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了vue如何使用bable将es6转译为es5问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了基于脚手架创建Vue项目实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
本篇文章主要介绍了vuelidate 对于vueJs2.0的验证解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
本线上买菜系统采用的数据库是Mysql，使用springboot框架开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue实现图片轮播组件思路及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了Vue.js 中的实用工具方法，本文是小编日常开发中常用的一些工具方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
在vue中最常用的应该就是axios了，这是一个很强大的处理ajax的库。今天我就分享一下我是如何封装axios的。axios的基本api不再赘述，提前安装一下也不用我说了吧2021-06-06
VUE3中h()函数和createVNode()函数的使用解读
这篇文章主要介绍了VUE3中h()函数和createVNode()函数的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论