Vue动态控制input的disabled属性的⽅法
有时候会有这样的需求，新增的时候可以输⼊，但是⽆法修改，此时就需要通过控制input标签的disabled属性来实现，那vue 是如何动态设置input输⼊框的disabled属性的呢？
输⼊框的html源代码
<el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input>
新增~input标签placeholder属性
通过F12查看实际页⾯渲染代码
修改~
通过F12查看实际页⾯渲染代码
主要是通过v-bind:disabled 绑定dataForm.id的值来动态判断是否添加 disabled 属性，⽽ dataForm.id 的默认初始值为0，新增时不会添加此属性；当点击修改时，dataForm.id 的值就是当前所要修改的数据记录的id，此时id不为0，因此 disabled 属性值就被设为 disabled，输⼊框也就⽆法修改
虽然说这样是有效的，但是只是页⾯的⼀个障眼法，如果去掉这个 disabled 属性，还是可以更改值的，关键是看后端业务逻辑如何处理，⼀种⽅法是前端页⾯针对修改操作时，不传配置项的值，另⼀种⽅法是前端传值，但是后端不进⾏处理
总结
以上所述是⼩编给⼤家介绍的Vue动态控制input的disabled属性，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。