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