vue組件中點擊按鈕后修改輸入框的狀態(tài)實例代碼
更新時間：2017年04月14日 08:44:45 作者：Eve慕
要求點擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài)。下面我給大家分享一段實例代碼基于vue組件中點擊按鈕后修改輸入框的狀態(tài)，需要的的朋友參考下
最近寫一個這樣的頁面
要求點擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài).我使用了vue中的事件處理器,但是不知道怎么獲取disabled這個屬性的值,所以以失敗告終.后來又使用了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來改變屬性,但是這個也沒用
$(document).ready(function(){
$('.submitButton').hide();
$('.reviseButton').click(function () {
$(this).hide();
$('.submitButton').show();
$('#username').attr("disabled",true);
$('#qq').addAttr("disabled");
})
})
最后! 機智的我查看了網(wǎng)頁,發(fā)現(xiàn)被禁用的輸入框是有個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)文章
Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng)。這篇文章重點給大家介紹Vue.js的模板語法，感興趣的朋友跟隨小編一起看看吧2020-02-02
這篇文章主要介紹了vue組寫一個組件,需要的朋友可以參考下2018-04-04
el-select自定義指令實現(xiàn)觸底加載分頁請求options數(shù)據(jù)(完整代碼和接口可直接用)
某些情況下,下拉框需要做觸底加載,發(fā)請求,獲取option的數(shù)據(jù),下面給大家分享el-select自定義指令實現(xiàn)觸底加載分頁請求options數(shù)據(jù)(附上完整代碼和接口可直接用),感興趣的朋友參考下吧2024-02-02
這篇文章主要介紹了vue-cli3打包時圖片壓縮處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
element-ui 實現(xiàn)響應式導航欄的示例代碼
這篇文章主要介紹了element-ui 實現(xiàn)響應式導航欄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要為大家詳細介紹了Vue中自定義指令的學習以及如何利用Vue制作一個簡單的學生信息管理系統(tǒng)，感興趣的小伙伴可以跟隨小編一起學習一下2023-05-05
這篇文章主要為大家詳細介紹了Vue導出頁面為PDF格式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
vue v-for出來的列表,點擊某個li使得當前被點擊的li字體變紅操作
這篇文章主要介紹了vue v-for出來的列表,點擊某個li使得當前被點擊的li字體變紅操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
今天小編就為大家分享一篇對vux點擊事件的優(yōu)化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue elementui form表單驗證的實現(xiàn)
這篇文章主要介紹了vue elementui form表單驗證的實現(xiàn),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11