Vue如何設(shè)置button的disable屬性
Vue設(shè)置button的disable屬性
表單元素有一個disable屬性，用來控制該元素是否可用。
1.這個屬性在HTML里只有1個值
用法就是 <button disable="disable">點擊</button>
經(jīng)實測，disable接受任何屬性值，甚至只要你給標(biāo)簽添加了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標(biāo)簽只要有disable屬性，不管它值是什么，效果都是不可用。但是在vue里就不是這樣了。通過屬性綁定，可以使用bool值來控制對應(yīng)的表單元素是否可用。
前提是，必須使用屬性綁定機(jī)制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,所以當(dāng)然在標(biāo)簽中寫啦, :disabled=flag(注意flag不要加引號,flag在data中設(shè)為Boolean值)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vite獲取所有環(huán)境變量(env)的實現(xiàn)方法
本文主要介紹了vite獲取所有環(huán)境變量(env)的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
vue+px2rem實現(xiàn)pc端大屏自適應(yīng)的實例代碼(rem適配)
不管是移動端的適配,還是大屏需求,都離不開不一個單位rem,rem是相對于根元素的字體大小的單位,下面這篇文章主要給大家介紹了關(guān)于vue+px2rem實現(xiàn)pc端大屏自適應(yīng)的相關(guān)資料,需要的朋友可以參考下2021-08-08
X6 是 AntV 旗下的圖編輯引擎，提供了一系列開箱即用的交互組件和簡單易用的節(jié)點定制能力，方便我們快速搭建流程圖、DAG 圖、ER 圖等圖應(yīng)用。接下來就看看vue如何使用它2021-05-05
本篇文章主要介紹了vue通過路由實現(xiàn)頁面刷新的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue中拆分視圖層代碼的5點建議,下面就如何進(jìn)行腳本代碼拆分提供一些思路，有一些可能是很基本的原則，為盡可能完整就放在一起，你并不需要從最開始就采納所有的建議。需要的朋友可以參考下2019-08-08
Vue項目中數(shù)據(jù)的深度監(jiān)聽或?qū)ο髮傩缘谋O(jiān)聽實例
這篇文章主要介紹了Vue項目中數(shù)據(jù)的深度監(jiān)聽或?qū)ο髮傩缘谋O(jiān)聽實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了在Vue中使用Compass的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue 中使用print.js導(dǎo)出pdf操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實現(xiàn)一個簡單的方位動畫,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
這篇文章主要介紹了記一次用vue做的活動頁的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04