vue中如何禁止input框和textarea編輯
更新時間:2022年04月24日 10:39:32 作者:weixin_33676492
這篇文章主要介紹了vue中如何禁止input框和textarea編輯,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
如何禁止input框和textarea編輯
在我們開發(fā)項目的時候,有時候我們不希望用戶對我們的頁面進行操作,尤其是輸入框之類的,這時候我們需要設置一下
第一種方法
<input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%" readonly> <textarea v-model="ConList.configuration.description" style="width: 100%;border: none;outline: none;resize:none;overflow:hidden" readonly></textarea>
重點:
我們使用readonly,用到此方法的好處是:當輸入框被禁止以后沒有灰色的背景色
第二種方法
<input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%" disabled> <textarea v-model="ConList.configuration.description" style="width: 100%;border: none;outline: none;resize:none;overflow:hidden" disabled></textarea>
重點:
我們使用disabled,用到此方法的好處是:當輸入框被禁止以后有灰色的背景色
根據(jù)項目的需求,不同的需求所用的方法不同,
拓展:
- 禁止文本域拖動:
resize:none - 禁止有滾動條:
overflow:hidden
說說input無法輸入原因
沒有設定初始值 v-model
動態(tài)循環(huán)綁定值時需要使用
@input=“change()” change(){this.$forceUpdate()} 強制更新視圖
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
vue在?for?循環(huán)里使用異步調用?async/await的方法
大家都遇到這樣的問題,在使用函數(shù)的async/await異步調用時候,放在正常函數(shù)中單個調用時沒有問題的,但是await放在forEach()循環(huán)里面就會報錯,本文給大家介紹vue?如何在?for?循環(huán)里面使用異步調用?async/await,感興趣的朋友一起看看吧2023-10-10
vue-cli腳手架config目錄下index.js配置文件的方法
下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue結合g6實現(xiàn)樹級結構(compactBox?緊湊樹)
本文主要介紹了vue結合g6實現(xiàn)樹級結構,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-06-06

