Vue如何設(shè)置button的disable屬性
Vue設(shè)置button的disable屬性
表單元素有一個disable屬性，用來控制該元素是否可用。
1.這個屬性在HTML里只有1個值
用法就是 <button disable="disable">點擊</button>
經(jīng)實測，disable接受任何屬性值，甚至只要你給標簽添加了disable的屬性，這個表單元素就成為不可用狀態(tài)。
換句話說，如果你試圖用下面的語句，讓按鈕成為可用狀態(tài)，是不可行的?！ ?/p>
<button disable="false">點擊</button> ? //仍然是不可用狀態(tài)
2.如果需要在vue項目中控制按鈕的可用與否
其實很簡單
<template>
<button v-bind:disable="dis">點擊</button> //仍然是不可用狀態(tài)
</template>
<script>
export default{
data(){
return {
dis: false
}
}
}
</script>雖然原生的HTML標簽只要有disable屬性，不管它值是什么，效果都是不可用。但是在vue里就不是這樣了。通過屬性綁定，可以使用bool值來控制對應(yīng)的表單元素是否可用。
前提是，必須使用屬性綁定機制v-bind。
Vue使用js控制button的disabled屬性
<button ref="btn">按鈕</button>
最好不要使用this.$refs.btn.setAttribute('disabled',true);禁用按鈕
因為這個的效果和this.$refs.btn.setAttribute('disabled',false);是一樣的,都禁用按鈕了,因為true或者false被轉(zhuǎn)化為了字符串,而這個字符串基本等效于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中設(shè)為Boolean值)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了webpack項目中使用vite加速的兼容模式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要給大家介紹了關(guān)于VUE3引入html文件并傳值的相關(guān)資料,這是最近在項目中遇到了的一個需求,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
說起canvas是css3新增的標簽,而餅狀圖又是canvas經(jīng)典,我們公司現(xiàn)在正在用uni-app框架去研發(fā)APP,下面這篇文章主要給大家介紹了關(guān)于Vue和uniapp中該如何使用canvas的相關(guān)資料,需要的朋友可以參考下2022-10-10
<el-button>點擊后如何跳轉(zhuǎn)指定url鏈接
這篇文章主要介紹了<el-button>點擊后如何跳轉(zhuǎn)指定url鏈接問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要給大家介紹了關(guān)于vite基本常見配置講解的相關(guān)資料,最近做項目要求將webpack打包方式換成vite,下面將詳細講解一下配置vite需要改動的東西,需要的朋友可以參考下2023-11-11
組件是有name屬性的,匹配的就是組件的name,下面這篇文章主要給大家介紹了關(guān)于vue中組件的name屬性含義和用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)進度條式柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了vue項目打包之后在本地運行的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本文主要介紹了element中el-table與el-form同用并校驗，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08