Vue: 如何动态的控制一个按钮的禁用和启用（控制disabled属性）

Created on 4 Mar 2016 · 14Comments · Source: vuejs/vue

<button disabled="disabled"></button>
如果需要禁用一个button只需要加上disabled属性，需要启用就需要删除disabled属性。
请问除了用原生的方法删除属性，在vuejs中有没有相应的方法？

我用Knockoutjs的时候它有专门处理disabled的方法，不知vuejs有没有。

目前想到的一个方法是：

<button v-show="!disabled" disabled="disabled"></button>
<button v-show="disabled"></button>

如果button或者input多了，就有点繁琐了

Source

satrong

Most helpful comment

<button :disabled="disabled">

yyx990803 on 4 Mar 2016

👍36 ❤3 👎2 😕1

All 14 comments

Hi there, please make sure to read the Issue Reporting Guidelines before opening new issues. The issue list only accepts bug reports and feature requests. Questions should be posted to the Gitter chat room, forum or StackOverflow. Thanks.

yyx990803 on 4 Mar 2016

<button :disabled="disabled">

yyx990803 on 4 Mar 2016

👍36 ❤3 👎2 😕1

这也算一个问题。。。。。。。。。

xiaolongyuan on 4 Mar 2016

👎48 😕1

@satrong （少年，看清 issue template）

Questions should be posted to the Gitter chat room, forum or StackOverflow. Thanks.

看英文少年，应该去 Gitter chat room, forum or StackOverflow 这些地方问。

而且作者已经写了 issue template，所以你 new issue 的时候就应该看得到，这行英语在前几行

The issue list only accepts bug reports and feature requests.

大家，开 issue 的时候注意注意，不要一行英语都不读。

SimplyY on 4 Mar 2016

👍7

@yyx990803 谢谢，在API中没找到有这方法

satrong on 4 Mar 2016

举一反三的能力还是需要多多锻炼！作者不可能写完所有例子。

jddy on 26 Aug 2016

👎5 👍2

orange-pig on 11 Dec 2016

即使使用了 :disabled="disabled" ，也要给每个按钮加，有没有更好的方法呢？

FrankFang on 16 Jan 2017

👍3

@FrankFang @orange-pig @satrong 作者（代指“VUE作者”）不建议操作DOM，是因为操作DOM会导致渲染速度变慢等诸多问题遗留。在适当的时候还是应该以操作DOM的形式来快速解决问题，这种情况依然没有违背作者的初衷。推荐使用路由的方式来更改input标签的disabled属性，用来区分是查看详情还是编辑详情：
mounted () { // 组件创建完成 let el = document.querySelectorAll('input') if (!this.$route.query.disabled) { for (let x of el) { x.setAttribute('disabled','disabled') } } }
提示：你依然可以配置为全局方法，在页面重新渲染的时候进行该操作（先行了解关于VUE的生命周期钩子），但不推荐这样做，除非你很多地方都用了这个属性。_

一个优秀的程序员绝不只有一种解决问题的思路，你可以通过很多种思路来解决当下问题，框架只是工具，请不要让它成为你开发上的阻碍！

noteScript on 29 Mar 2017

@chuanPro 为什么用路由？感觉用路由控制按钮的disabled状态不符合直觉

FrankFang on 29 Mar 2017

@FrankFang 因为路由可你帮你处理当前打开的状态是否可编辑，是可编辑还是仅仅是查看（公用组件场景）。这只是一个思路，有一种愚蠢的方法，就是选择class进行disabled，同样是可以的，不同的场景不同的思路。你应该致力于思考这个问题：“一切重复的工作都是不必要的，一旦发现自己在重复的写一个东西，你就应该考虑一下这是否是最优的解决方式”

noteScript on 29 Mar 2017

<el-input
          :disabled="scope.row.inputState"
          :value="initWidth(scope.row)"
          placeholder="宽"
          size="mini" />
        <p>&nbsp;&nbsp; * &nbsp;&nbsp;</p>
        <el-input
          :disabled="scope.row.inputState"
          :value="initHeight(scope.row)"
          :focus="editPic(scope.row)"
          placeholder="高"
          size="mini" />

newValue.map(index => {
          temData.push({
            name: index.fileInfo.name.replace(/"/g),
            size: JSON.stringify(index.fileInfo.size / 1048576).replace(/"/g).slice(0, 5) + 'MB',
            dimensions: {
              width: index.fileInfo.width,
              height: index.fileInfo.height
            },
            inputState: true})
        })

或许可以这样写

LtHelo on 19 Jul 2018

举一反三的能力还是需要多多锻炼！作者不可能写完所有例子。

初学者不了解原理，怎么举一反三？举一反三都是在正确深入的了解原理后，才能达到呢，像我们这种菜鸟，难道就不应该提问吗？现在那些聊天室、群等等哪个不是吹牛逼的时候高朋满座，一问个问题，就各种冷嘲热讽，说各种 little case 的人，我们还怎么解决？知道你们是大神，忙着各种业务方面的重大改进等，但是我们实在是没办法了才来这问的啊，大神的某些经验，肯定比那些净瞎吹牛逼的各种群友要强，要少走好多弯路，不是吗？

shiro-siben on 21 Nov 2018

👍8 👎7

举一反三的能力还是需要多多锻炼！作者不可能写完所有例子。

初学者不了解原理，怎么举一反三？举一反三都是在正确深入的了解原理后，才能达到呢，像我们这种菜鸟，难道就不应该提问吗？现在那些聊天室、群等等哪个不是吹牛逼的时候高朋满座，一问个问题，就各种冷嘲热讽，说各种 little case 的人，我们还怎么解决？知道你们是大神，忙着各种业务方面的重大改进等，但是我们实在是没办法了才来这问的啊，大神的某些经验，肯定比那些净瞎吹牛逼的各种群友要强，要少走好多弯路，不是吗？

不要偷换概念, 不是不让提问, 而是提问的方式和地方不对