VUE.js动态设置输入框disabled属性

最新推荐文章于 2024-05-30 14:33:11 发布
最新推荐文章于 2024-05-30 14:33:11 发布
阅读量2w 收藏 6
点赞数 3
文章标签： vue 动态设置输入框属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HB15093703910/article/details/83992941
版权

需求背景

页面从list列表展示，跳转到新增和修改的时候，新增和修改用的是同一个页面：add-or-update.vue。
修改的时候用户的账号不能修改，因此需要将账号的输入框属性设置为"只读"。

代码样例

<el-input v-model="dataForm.account" placeholder="账号" v-bind:disabled="dataForm.id!=0"></el-input>

v-bind:disabled="dataForm.id!=0"

dataForm.id初始值为0

当修改操作时，dataForm.id是将要修改的那条数据的id，当新增时，dataForm.id是0

HB15093703910
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue动态控制input的disabled属性的方法
12-29
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 新增~ 通过F12查看实际页面渲染代码 修改~ 通过F12查看实际页面渲染代码 主要是通过 v-bind:disabled 绑定 dataForm.id 的值来动态判断是否添加 disable
VUE.js实现动态设置输入框disabled属性
10-16
今天小编就为大家分享一篇VUE.js实现动态设置输入框disabled属性，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中的显示框/输入框设置为只读方式
最新发布
TC0221的博客
05-30 472
此属性用于输入字段为只读，可防止用户对值进行修改，但仍可选中对话框文字。1）disabled=“disabled”：此方法可使输入框变灰色。样式：光标点击是不显示光标的！
vue 控制 input 的 disabled
weixin_34315189的博客
06-04 1528
<input type="number" v-model="item.rvb07_1" :disabled="type == 'receiveNumberEdit'"> 　　 转载于:https://www.cnblogs.com/zhangym118/p/9134730.html
js对input框的可编辑属性设置
axfcjwkbi259888707的博客
04-25 829
添加disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("disabled","disabled"); 移除disabled属性 $('#areaSelect').attr("disabled",false); $('#areaSelect').removeAttr("...
经典vue.js学习教材
10-17
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发并维护。它的核心特性包括数据绑定、组件化、指令系统和虚拟DOM，使得构建用户界面变得更加简洁高效。本压缩包中的"经典vue.js学习教材"重点是关于Vue.js的...
Vue.js实现移动端短信验证码功能
10-20
`disabled`属性用于禁用已填充的输入框，确保用户只能按顺序输入。`v-model`用于双向绑定数据，`@keyup`监听键盘事件，`pattern`则限制输入只能为数字。最后一行的输入框使用了`ref`属性，以便在JavaScript中引用它...
Vue动态控制disabled属性
前端如逆水行舟...
08-16 1万+
在Vue中disabled:的值是受布尔值影响的，false为关闭禁用，true为开启禁用效果。通过某个input中值是否为空或者某个id是否为空来控制当前的表单元素是否禁用
element-plus中通过按钮来控制el-input输入框的禁用可用状态
载_酒i
04-27 883
在 Vue.js 中，您可以使用el-input组件的disabled属性来设置输入框的可编辑状态。这个属性接受一个布尔值，当设置为true时，输入框将不可编辑；当设置为false或省略时，输入框将是可编辑的。
vue实现页面内容禁止选中功能,仅输入框和文本域可选
12-13
上网上翻了翻，共找到两种方式 CSS样式控制，只需将下面代码复制到 vue应用下，index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input{ -webkit-user-select:au
Vue3中动态绑定:disabled element-plus使用方法
xiaoming4965的博客
04-04 2959
Vue3中动态绑定:disabled element-plus使用方法
Vue动态控制输入框的禁用属性的方法
程 序 猿的博客
12-21 1万+
首首先呢，有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 使用这个属性 v-bind:disabled="disabled" <el-input v-model="tableForm.key" autocomplete="off" v-bind:disab...
Vue动态控制input的disabled属性
weixin_34126215的博客
06-25 1万+
有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 <el-input v-model="dataForm.name" placeholder="配置项" v-bind:dis...
ant-design-vue的form表单全局禁用不生效
小马甲
01-01 1461
实际使用`ant-design-vue`在开发表单的时候或许会遇到编辑与查看的需求，但是查看的时候表单不允许编辑，`ant-design-vue`的官方是没有像`element`一样提供全局`disabled`属性的，但是我们对一个一个的`form-item`去添加又有一些麻烦，所以我使用了一个全局`css`属性才设置。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
vue基础之一 ----介绍和基本指令
qq_39775617的博客
08-30 286
类名绑定 v-bind:class=”{类名 : 表达式}” 当表达式为真,继承类名,为假不继承 简写: :class=”{}” 所有的v-bind都可以被简写为一个冒号 v-bind:disabled=”表达式” 当表达式为真,当前元素不可用,反之可用 简写: :disabl...
Vue内置指令的使用
天空之外
09-20 308
v-model（数据绑定） v-model常用于表单数据的双向绑定，它本质上是一个语法糖。它主要的有两种应用： 在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用<div id="app"> <input v-model="test"> <!-- <input :value="test" @input="test= $event.target.v...
vue中disabled 的用法
热门推荐
lomenw的博客
04-03 9万+
&lt;input type="text" :disabled="disabled"&gt; data:{ disabled:false }
vue.js实现动态设置输入框disabled属性
05-01
Vue.js是一个用于构建用户界面的JavaScript框架，它可以轻松实现动态设置输入框的disabled属性。 首先，在Vue实例中定义一个data属性，用于控制输入框的disabled属性。可以使用默认值false表示不禁用输入框。例如：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值