vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài)實(shí)例代碼
更新時(shí)間：2017年04月14日 08:44:45 作者：Eve慕
要求點(diǎn)擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài)。下面我給大家分享一段實(shí)例代碼基于vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài)，需要的的朋友參考下
最近寫一個(gè)這樣的頁面
要求點(diǎn)擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài).我使用了vue中的事件處理器,但是不知道怎么獲取disabled這個(gè)屬性的值,所以以失敗告終.后來又使用了vue中的v-bind,使其與class或者style綁定,但是也沒有作用
<el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}></el-input>
data(){
return{
isDisabled:true
}
}
后來又想到使用jquery來改變屬性,但是這個(gè)也沒用
$(document).ready(function(){
$('.submitButton').hide();
$('.reviseButton').click(function () {
$(this).hide();
$('.submitButton').show();
$('#username').attr("disabled",true);
$('#qq').addAttr("disabled");
})
})
最后! 機(jī)智的我查看了網(wǎng)頁,發(fā)現(xiàn)被禁用的輸入框是有個(gè)is-disabled的類的,所以用jquery修改類即可
$(document).ready(function(){
$('.submitButton').hide();
$('.reviseButton').click(function () {
$(this).hide();
$('.submitButton').show();
$('#usernames').removeClass("is-disabled");
$('#qq').addClass("is-disabled");
})
})
相關(guān)文章
vue3中的watch是一個(gè)組合式的API使用時(shí)需要引入,下面這篇文章主要給大家介紹了關(guān)于vue3下watch使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
uni-app是一個(gè)使用Vue.js開發(fā)的多端開發(fā)框架,下面這篇文章主要給大家介紹了關(guān)于uni-app?vue3接口請求封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
本篇文章主要介紹了詳解Vue路由鉤子及應(yīng)用場景（小結(jié)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Vite比Vue CLI快在哪里，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
使用keep-alive時(shí),數(shù)據(jù)無法刷新的問題及解決
這篇文章主要介紹了使用keep-alive時(shí),數(shù)據(jù)無法刷新的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了詳解vuex之store源碼簡單解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue3中vuex與pinia踩坑的相關(guān)資料,需要的朋友可以參考下2021-12-12
Vue項(xiàng)目自動(dòng)轉(zhuǎn)換 px 為 rem的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue項(xiàng)目自動(dòng)轉(zhuǎn)換 px 為 rem的實(shí)現(xiàn)方法，本文是通過一系列的配置后，轉(zhuǎn)換成熱門，具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2018-10-10
Vue?echarts@4.x中國地圖及AMap相關(guān)API使用詳解
這篇文章主要為大家介紹了Vue使用echarts@4.x中國地圖及AMap相關(guān)API使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12