vue 动态控制input输入框的disabled属性

最新推荐文章于 2024-06-12 16:27:56 发布
最新推荐文章于 2024-06-12 16:27:56 发布
阅读量1.4w 收藏 36
点赞数 16
分类专栏： vue 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42166279/article/details/120429965
版权

 最近项目上提出一个经常遇到的需求，点击新增时input可输入，点击编辑时input置灰。写下过程，希望能帮助到大家。

  

  

 1.首先在input上添加disabled属性

      

 

  2.data中定义isDisabled值为false(可编辑)

  

  3.在新增的点击事件中设置isDisabled=false(可编辑) . 编辑的点击事件中设置isDisabled=true(不可编辑).

   

 

 

     最后的效果就是文章最开头啦！       

                                                                                                ☽

Julyued
关注
  • 16
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Element Input输入框的使用方法
10-15
- 还有更多属性如 `disabled`、`size`、`readonly`、`autofocus` 等，可以查看官方文档获取详细信息。 在实际开发中，结合这些属性和插槽，我们可以灵活地构建各种复杂的输入框组件，满足不同场景的需求。Element ...
vue组件中点击按钮后修改输入框的状态实例代码
08-30
5. 动态属性绑定：`:disable`（或`v-bind:disable`）用于根据数据属性动态绑定元素的`disabled`属性。 6. 方法定义：在Vue实例的`methods`选项中定义函数，处理事件。 7. 避免直接操作DOM：在Vue应用中，应尽量避免...
Vue2_不同状态下禁用input框
Rainbow_bead的博客
10-30 1669
vue 不同状态下禁用input框
vue中 input disable后无法触发点击事件
gaxing4615的博客
02-28 1223
大家都知道 input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，可以试试 pointer-events: none。问题：input标签为disabled后，点击事项无效；当点击文字**“请选择”**时无法触发点击事件，其父标签的其余位置均可触发。解决：只需要在input标签中添加 style=“pointer-events:none” 即可。作用是让元素实体 “虚化”，去掉鼠标事件。
解决uview2中u--input输入框禁用状态下click事件不生效
最新发布
逆水行舟 不进则退
06-12 449
解决uview2中u--input输入框禁用状态下click事件不生效
Vue+elementui实现动态禁用菜单栏
HeBLL的博客
08-18 2356
动态禁用
vue 使用 el-date-picker 动态设置 disabled-date
weixin_45482035的博客
03-09 5064
vue 使用 el-date-picker 动态设置 disabled-date
vue将输入框置灰_Vue动态控制input的disabled属性的方法
weixin_39638305的博客
12-20 5249
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？输入框的html源代码新增~通过F12查看实际页面渲染代码修改~通过F12查看实际页面渲染代码主要是通过 v-bind:disabled绑定 dataForm.id 的值来动态判断是否添加 disabled 属性，而...
vue el-input 输入框禁用 :disabled禁用 多个禁用写法
weixin_45251179的博客
03-28 1万+
输入框禁用
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 配置项 v-bind:disabled=...
VUE.js实现动态设置输入框disabled属性
10-16
在Vue.js中，动态设置组件属性是常见的需求，特别是对于输入框（input）元素的`disabled`属性。`disabled`属性用于禁用一个表单元素，使得用户无法对其进行交互。在某些场景下，如编辑已有的记录时，我们可能希望...
Ant design vue 的组件禁用属性 disabled.pdf
12-16
`disabled`属性适用于多种组件，包括日期选择器（DatePicker）、下拉菜单（Select）以及输入框（Input）等。在日期选择器组件中，`isTime`是一个与`disabled`相关的特殊属性，用于控制时间选择部分是否可用。当`is...
vue 设置 input 为不可以编辑的实现方法
10-16
今天小编就为大家分享一篇vue 设置 input 为不可以编辑的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue动态控制input的disabled属性
weixin_34126215的博客
06-25 1万+
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 <el-input v-model="dataForm.name" placeholder="配置项" v-bind:dis...
vue中disabled 的用法
热门推荐
lomenw的博客
04-03 9万+
&lt;input type="text" :disabled="disabled"&gt; data:{ disabled:false }
input设置为disable，不能点击
only_neo的博客
03-26 2万+
今天项目中遇到了一个小问题，用的vue，封装了一个模拟的input，点击后可以弹出dialog，绑定的点击事件放在了引用的那里    &lt;div class="dialogInput"&gt; &lt;span class="el-input__prefix"&gt; &lt;i class="el-input__icon el-icon-search"...
vue.js实现动态设置输入框disabled属性
05-01
Vue.js是一个用于构建用户界面的JavaScript框架，它可以轻松实现动态设置输入框的disabled属性。 首先，在Vue实例中定义一个data属性，用于控制输入框的disabled属性。可以使用默认值false表示不禁用输入框。例如： ``` data: { isDisabled: false } ``` 然后，在模板中使用v-bind指令绑定输入框的disabled属性到定义的isDisabled属性上。例如： ``` <input type="text" v-bind:disabled="isDisabled"> ``` 现在，只需在Vue实例中修改isDisabled属性的值为true或false即可动态禁用或启用输入框。例如： ``` methods: { disableInput: function() { this.isDisabled = true; }, enableInput: function() { this.isDisabled = false; } } ``` 在需要禁用输入框时，调用disableInput方法；在需要启用输入框时，调用enableInput方法即可。 总之，Vue.js可以轻松实现动态设置输入框的disabled属性，只需使用v-bind指令绑定到Vue实例的data属性上，随时修改data属性的值即可动态控制输入框的disabled属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值