Vue如何设置button的disable属性
更新时间：2022年04月01日 11:13:17 投稿：jingxian
这篇文章主要介绍了Vue如何设置button的disable属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue设置button的disable属性
表单元素有一个disable属性，用来控制该元素是否可用。
1.这个属性在HTML里只有1个值
用法就是 <button disable="disable">点击</button>
经实测，disable接受任何属性值，甚至只要你给标签添加了disable的属性，这个表单元素就成为不可用状态。
换句话说，如果你试图用下面的语句，让按钮成为可用状态，是不可行的。
<button disable="false">点击</button> //仍然是不可用状态
2.如果需要在vue项目中控制按钮的可用与否
其实很简单
<template>
<button v-bind:disable="dis">点击</button> //仍然是不可用状态
</template>
<script>
export default{
data(){
return {
dis: false
}
}
}
</script>虽然原生的HTML标签只要有disable属性，不管它值是什么，效果都是不可用。但是在vue里就不是这样了。通过属性绑定，可以使用bool值来控制对应的表单元素是否可用。
前提是，必须使用属性绑定机制v-bind。
Vue使用js控制button的disabled属性
<button ref="btn">按钮</button>
最好不要使用this.$refs.btn.setAttribute('disabled',true);禁用按钮
因为这个的效果和this.$refs.btn.setAttribute('disabled',false);是一样的,都禁用按钮了,因为true或者false被转化为了字符串,而这个字符串基本等效于true,也就是都是禁用的写法
而若是改为this.$refs.btn.disabled = true(禁用按钮),this.$refs.btn.disabled = false(可用按钮)就能满足正常的需求了
不过非要使用setAttribute也不是不行,要取消禁用按钮就要配合removeAttribute使用了:
this.$refs.btn.removeAttribute('disabled');vue不太建议使用dom,所以当然在标签中写啦, :disabled=flag(注意flag不要加引号,flag在data中设为Boolean值)
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现页面添加水印功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
详解vue中v-for和v-if一起使用的替代方法template
这篇文章主要介绍了vue中v-for和v-if一起使用的替代方法template,使用的版本是vue 2.9.6和element-ui: 2.15.6，通过实例代码给大家讲解的非常详细，需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了vue.js声明式渲染和条件与循环的基础知识，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
在做项目中，会遇到一些树形的数据结构，常用在左侧菜单导航，本文就介绍一下如何实现，感兴趣的可以了解一下2021-07-07
这篇文章主要介绍了vue如何在vue.config.js文件中导入模块问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue左右侧联动滚动的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家介绍了Object.assign触发watch原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
今天小编就为大家分享一篇Vue 监听列表item渲染事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了如何利用vue实现拍照或录像的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要介绍了vue3使用vue-router及路由权限拦截方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论