vue中动态控制btn的disabled属性

最新推荐文章于 2025-07-02 20:02:09 发布
最新推荐文章于 2025-07-02 20:02:09 发布
阅读量7.9w 收藏 19
点赞数 6
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_38098192/article/details/80346779
本文介绍如何在Vue.js中根据后端返回的数据动态控制按钮的禁用状态。通过监听Ajax请求结果来改变按钮的disabled属性，实现按钮在数据为空时被禁用，反之则启用的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

场景：当ajax请求回来的数据为空时，btn为disabled的状态，否则，btn的disabled属性为false

代码：

<button class="iconDivIcon targetBtn" :class="isdisabled?btndisabled:''"  style="width:100px;" @click="changeEnables(0)" :disabled="isdisabledFn">禁用</button>  

<div id="app"><button :disabled="isdisabledFn">测试</button><div>    


js中：

var app=new Vue({

        el:"#app",

        data:{

                isDisabl:true

        },

        computed:{

                isdisabledFn(){

                    if(后台传过来的数据!=null){

                            return this.isdisabled=false;

                    }else{

                            return this.isdisabled=true;

                    }

                }

        }

})

Vue2 动态渐变背景的多功能表单页面设计（附完整源码） 极光渐变背景下的登录注册忘记密码页面实现（Vue2 实战） 炫酷前端开发：Vue2 实现动态背景多合一功能页面 从零开始开发动态渐变背景的 V
sky10100100的博客
11-30 772
Vue2 动态渐变背景的多功能表单页面设计（附完整源码） 极光渐变背景下的登录注册忘记密码页面实现（Vue2 实战） 炫酷前端开发：Vue2 实现动态背景多合一功能页面 从零开始开发动态渐变背景的 Vue2 多功能认证页面 Vue2 项目实践：动态背景 + 验证码倒计时功能表单设计Vue2 动态渐变背景的多功能表单页面设计（附完整源码） 极光渐变背景下的登录注册忘记密码页面实现（Vue2 实战） 炫酷前端开发：Vue2 实现动态背景多合一功能页面 从零开始开发动态渐变背景的 Vue2 多功能认证页面 Vue
Vue.js 实战：从零实现实名认证弹框页面“ “Vue 入门实例：制作一个动态表单和弹框页面“ “使用 Vue.js 构建实名认证页面，含动态验证和弹框提示“ “新手友好！Vue.js 完整表单弹框
南北极之间
11-08 1039
简介 本教程将详细介绍如何使用 Vue.js 创建一个实名认证表单页面，包括验证姓名和身份证号输入的表单、动态按钮状态控制，以及点击按钮后弹出的验证成功提示框。本项目适合 Vue.js 初学者，并将每一部分代码和逻辑逐步解析。在该项目中，我们将通过 Vue.js 实现一个找回密码的表单页面。用户需要输入真实姓名和身份证号码，点击“下一步”按钮后，会弹出一个“验证成功”的提示框。首先，我们需要在 HTML 中引入 Vue.js 库，确保能够使用 Vue 的功能： HTML 结构 基本结构 在页面主体中，我们
Vue动态控制input的disabled属性的方法
08-27
主要介绍了Vue动态控制input的disabled属性的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
el-button/button置灰及原理
weixin_45825917的博客
07-02 692
这是等效于写 button disabled的写法，虽然它的值是字符串 “true”，但只要 disabled 这个属性存在，浏览器就认为它为 true。如果你希望按钮在“初始渲染前”就已经是灰的（比如 SSR 场景），那就不建议用指令，而是直接用 :disabled=“true” 靠组件本身逻辑控制。el.classList.add(‘is-disabled’) ✅（仅样式） ❌（仍能点）❓ 如果你操作的是 el-button 这样的组件，不是原生 ，为什么仍然能置灰？
Vue动态控制disabled属性
前端如逆水行舟...
08-16 2万+
在Vue中disabled:的值是受布尔值影响的，false为关闭禁用，true为开启禁用效果。通过某个input中值是否为空或者某个id是否为空来控制当前的表单元素是否禁用
Vue 动态控制输入框的disabled属性
7c
08-10 4446
Vue 动态控制输入框的disabled属性
vue后台路由动态配置
qq_40352933的博客
04-22 1432
vue+elementUI后台路由动态配置 做了好几个项目都需要根绝用户角色做动态路由配置 1.现在附上页面的实现，其中根据路由表生成右侧复选框需要的数据，在改变复选框状态后，将已经勾选的路由名字传递给后台； 2.不同用户登录后，在路由守卫时根据用户信息接口查到的可访问的路由的名字，去生成对应路由，加入到路由表中 <template> <div class="role"> <el-row :gutter="20"> <el-col :s
【Vue】动态增减表单、表单验证
Mr_EvanChen的Blog
10-17 5844
        业务需求：在添加维度时，需要为其动态添加子维度，要求至少一个且名称不能重复，同时进行表单验证。vue页面代码如下： &lt;template&gt; &lt;div&gt; &lt;el-form class="mt10 pd10 elForm" ref="form" :model="form" label-width="130px" :label-posi
Vue2 实现实名认证页面：分步骤表单 + 文件上传功能 手把手教你用 Vue2 开发动态表单页面（实名认证功能） Vue2 项目实战：实名认证功能开发，支持上传与动态验证 轻松上手！用 Vue2 构
南北极之间
11-23 666
Vue2 实现实名认证页面：分步骤表单 + 文件上传功能 手把手教你用 Vue2 开发动态表单页面（实名认证功能） Vue2 项目实战：实名认证功能开发，支持上传与动态验证 轻松上手！用 Vue2 构建分步式实名认证表单（附完整代码） 从零开始用 Vue2 实现实名认证功能：上传、验证与提交Vue2 实现实名认证页面：分步骤表单 + 文件上传功能 手把手教你用 Vue2 开发动态表单页面（实名认证功能） Vue2 项目实战：实名认证功能开发，支持上传与动态验证 轻松上手！用 Vue2 构建分步式实名认证表单
vue中动态加载disabled以及其他属性的写法
weixin_38225763的博客
09-13 1713
tableData.isClickQuotation 是返回的bool类型值，若未true，则启用disabled，否则不用。tableData.isClickQuotation”，vue3中可以简写成。在实际开发中不免需要动态加载一些元素，尤其时内置的元素的属性。
iview 动态设置disabled_iview表单中，如何取消对 disabled的控件的验证？
weixin_30628943的博客
12-23 1102
根据控件是否禁用，开启或者关闭该控件的必须项检查。<Form-Item prop="link_address" :show-message="!disableLinkAddress" label="链接地址"><i-Input :disabled="disableLinkAddress" placeholder="Enter something..." v-model="form...
vue绑定类名 禁用样式
Yugoup的博客
06-26 1173
随笔 vue 绑定类名 是否禁用样式 :class="{'focu_li':item.now,'des_li':item.disabled}" //可以这样绑定 //css .focu_li { border: 1px solid #00b48b; font-weight: bold; } .des_li { background-color: lightgra...
vue中使用js控制button的disabled属性
qq_42750608的博客
11-15 8379
<button ref="btn">按钮</button> 最好不要使用this.$refs.btn.setAttribute('disabled',true);禁用按钮 因为这个的效果和this.$refs.btn.setAttribute('disabled',false);是一样的,都禁用按钮了,因为true或者false被转化为了字符串,而这个字符串基本等效于...
vue动态改变：disabled的属性值
weixin_45869649的博客
05-28 2万+
动态改变：disabled的属性值 找了很久，可能没人提这么弱智的问题哭唧唧，所以我自己琢磨了很久，终于啊。。 首先：先把那个none改为一个可以修改的值，这里我随便起的也叫disabled <date-picker v-model="time1" valueType="format" ref="userBirthdayInput" id="userBirthday" :di
vue组件的class名绑定一个或者多个类名的写法
jsmylo的博客
03-27 1651
vue组件的class名绑定一个或者多个类名的写法
vue el-button v-if disable失效
addBrick_java的博客
07-13 5939
vue el-button v-if disable失效
el-button 使用禁止和取消禁止
热门推荐
明耀的博客
03-30 3万+
【代码】el-button 使用禁止和取消禁止。
vue2怎么修改button的disabled值
最新发布
07-05
<think>我们正在讨论的是在Vue2中如何动态修改按钮的disabled状态。根据引用内容，我们可以总结几种方法，并注意一些常见问题。 方法一：使用计算属性（推荐） 在Vue中，我们可以使用计算属性来根据数据状态动态设置disabled属性。例如： ```vue <template> <el-button :disabled="isDisabled">按钮</el-button> </template> <script> export default { data() { return { status: 0 // 假设状态值 } }, computed: { isDisabled() { // 根据条件返回true或false return this.status === 0 || this.status === 1; } } } </script> ``` 方法二：直接在模板中写表达式（简单条件） 如果条件简单，也可以直接在模板中写表达式： ```vue <el-button :disabled="status === 0 || status === 1">按钮</el-button> ``` 但是注意：引用[4]中提到，如果使用多个条件，要注意逻辑运算符的使用。例如，当需要满足多个条件之一时禁用，使用`||`是正确的。但是引用[4]中的例子原本想表达：当status为0或者1时禁用，但写成了： ```html :disabled="isDisabled.status === 0 || isDisabled.status === 1 || isDisabled.status === 2 ?false : true" ``` 实际上，这个表达式可以简化为： ```html :disabled="!(status === 0 || status === 1 || status === 2)" ``` 或者 ```html :disabled="status !== 0 && status !== 1 && status !== 2" ``` 方法三：使用自定义指令（不推荐直接操作DOM） 引用[1]中提到，直接操作DOM修改disabled属性可能不会生效，因为Vue的响应式系统可能没有更新，或者Element UI的按钮组件内部有处理。所以，我们应该通过Vue的数据驱动方式来修改，而不是直接操作DOM。 常见问题及解决方案： 1. 初始化渲染失效：引用[2]中提到，如果按钮的父组件有v-if，可能会导致初始渲染时disabled状态不正确。解决方法是为按钮添加key属性，或者避免在父元素上使用v-if（可以使用v-show替代，或者确保条件变化时重新渲染）。 2. 样式问题：引用[1]中提到，即使设置了disabled属性，样式可能没有生效。这是因为Element UI的按钮禁用状态不仅依赖于disabled属性，还有.is-disabled类。但是，如果我们使用Element UI的按钮组件，并通过:disabled绑定，组件内部会自动添加这个类。所以，我们应该使用组件提供的disabled属性，而不是自己操作DOM。 总结： 在Vue2中，动态修改按钮的disabled状态，应该使用Vue的数据驱动方式，通过计算属性或表达式绑定到disabled属性上。对于Element UI的按钮，使用:disabled绑定即可，组件会处理样式和禁用行为。 示例：根据状态值动态禁用 假设我们有一个按钮，当状态为0或1时禁用，否则启用。 ```vue <template> <el-button :disabled="status === 0 || status === 1">提交</el-button> </template> <script> export default { data() { return { status: 2 // 可以改变这个值测试 } } } </script> ``` 或者使用计算属性（当逻辑复杂时）： ```vue <template> <el-button :disabled="isSubmitDisabled">提交</el-button> </template> <script> export default { data() { return { status: 2 } }, computed: { isSubmitDisabled() { return this.status === 0 || this.status === 1; } } } </script> ``` 注意：如果遇到父组件条件渲染（v-if）导致的问题，可以尝试给按钮添加一个唯一的key，如引用[2]中所示。 如果按钮是自定义组件，确保它接收disabled属性并正确应用到内部的button元素上。 相关问题： 1. Vue2中如何动态设置多个条件来控制按钮禁用状态？ 2. 为什么在Vue2中直接操作DOM修改disabled属性不生效？ 3. 如何解决Element UI按钮禁用样式不生效的问题？ 4. 在Vue2中，使用v-if控制按钮的显示隐藏会影响disabled状态吗？ 5. 如何根据接口返回的数据动态设置按钮禁用状态？</think>在 Vue2 中动态修改按钮的 `disabled` 状态，推荐使用以下方法： ### 推荐方法：使用计算属性（最佳实践） ```vue <template> <el-button :disabled="isButtonDisabled" @click="handleClick" > 提交 </el-button> </template> <script> export default { data() { return { // 状态数据 formStatus: 0, // 0=未提交, 1=处理中, 2=已完成 isLoading: false } }, computed: { isButtonDisabled() { // 当状态为"处理中"或"已完成"时禁用按钮 return this.formStatus === 1 || this.formStatus === 2 || this.isLoading; } }, methods: { handleClick() { // 处理点击事件 } } } </script> ``` ### 其他有效方法： #### 1. 直接在模板中使用表达式 ```vue <el-button :disabled="formStatus === 1 || formStatus === 2" > 提交 </el-button> ``` #### 2. 使用多个条件判断（注意逻辑运算符） ```vue <el-button :disabled="formStatus === 0 && !isValid || isLoading" > 提交 </el-button> ``` ### 常见问题解决方案： 1. **样式不生效问题**（引用[1]） - 不要直接操作 DOM，使用 Vue 的响应式系统 - 确保使用 Element UI 的 `:disabled` 属性绑定 2. **初始化渲染失效**（引用[2]） ```vue <el-button :key="'btn-' + formStatus" :disabled="isButtonDisabled" > 提交 </el-button> ``` 3. **根据接口数据设置状态** ```javascript export default { data() { return { apiData: { status: null } } }, async created() { const response = await axios.get('/api/status'); this.apiData = response.data; }, computed: { isButtonDisabled() { return this.apiData.status === 1; // 根据API状态禁用 } } } ``` 4. **复杂条件处理**（引用[4]） ```javascript computed: { isButtonDisabled() { // 状态为0或1时禁用 return [0, 1].includes(this.formStatus); } } ``` ### 注意事项： 1. **避免直接操作 DOM**（引用[1]） - 不要使用 `el.disabled = true` 或 `classList.add('is-disabled')` - 使用 Vue 的响应式数据驱动视图更新 2. **使用正确的逻辑运算符** - `||` (或) 和 `&&` (与) 根据需求选择 - 复杂逻辑建议使用计算属性 3. **处理动态内容** - 当按钮状态依赖异步数据时，使用 `v-if` 或 `key` 强制重新渲染 4. **Element UI 特定用法** ```vue <el-button :disabled="isDisabled" :loading="isLoading" > {{ isLoading ? '处理中...' : '提交' }} </el-button> ``` ### 工作流程： 1. 定义状态数据（`data`） 2. 创建计算属性确定禁用状态 3. 使用 `:disabled` 绑定到按钮 4. 状态变化时自动更新按钮状态
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值