vue中如何禁止input框和textarea編輯

更新時(shí)間：2022年04月24日 10:39:32 作者：weixin_33676492

這篇文章主要介紹了vue中如何禁止input框和textarea編輯，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

如何禁止input框和textarea編輯

在我們開(kāi)發(fā)項(xiàng)目的時(shí)候，有時(shí)候我們不希望用戶對(duì)我們的頁(yè)面進(jìn)行操作，尤其是輸入框之類(lèi)的，這時(shí)候我們需要設(shè)置一下

第一種方法

<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>

重點(diǎn)：

我們使用readonly，用到此方法的好處是：當(dāng)輸入框被禁止以后沒(méi)有灰色的背景色

第二種方法

<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>

重點(diǎn)：

我們使用disabled,用到此方法的好處是：當(dāng)輸入框被禁止以后有灰色的背景色

根據(jù)項(xiàng)目的需求，不同的需求所用的方法不同，

拓展：

禁止文本域拖動(dòng)：resize:none
禁止有滾動(dòng)條：overflow:hidden

說(shuō)說(shuō)input無(wú)法輸入原因

沒(méi)有設(shè)定初始值 v-model

動(dòng)態(tài)循環(huán)綁定值時(shí)需要使用

@input=“change()” change(){this.$forceUpdate()}

強(qiáng)制更新視圖

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue中禁止編輯的常見(jiàn)方法(以禁止編輯輸入框?yàn)槔?

相關(guān)文章

vue實(shí)現(xiàn)在頁(yè)面上添加水印的示例代碼
這篇文章主要給大家介紹一下vue實(shí)現(xiàn)在頁(yè)面上添加水印的實(shí)例,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來(lái)看看吧
2023-12-12
vue3中onUnmounted使用詳解
在Vue3中,onUnmounted是一個(gè)生命周期鉤子,它會(huì)在組件實(shí)例被卸載（unmounted）和銷(xiāo)毀之前被調(diào)用,本文給大家介紹vue3中onUnmounted使用詳解,感興趣的朋友跟隨小編一起看看吧
2024-03-03
element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))
這篇文章主要介紹了element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)潔版的Mini-Vue框架，應(yīng)該包含三個(gè)模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫(kù)模塊，本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn)，需要的可以參考一下
2023-07-07
Vue數(shù)據(jù)綁定實(shí)例寫(xiě)法
在本篇文章里小編給大家整理的是關(guān)于Vue數(shù)據(jù)綁定實(shí)例寫(xiě)法以及相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。
2019-08-08
如何在vue中使用HTML 5 拖放API
這篇文章主要介紹了如何在vue中使用HTML 5 拖放API，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
Vue3使用TypeIt實(shí)現(xiàn)文字打字機(jī)效果的代碼示例
在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中,文字打字機(jī)效果是一種非常流行的動(dòng)畫(huà)效果,能夠吸引用戶的注意力并提升用戶體驗(yàn),本文將介紹如何在 Vue 3 中使用 TypeIt 庫(kù)實(shí)現(xiàn)文字打字機(jī)效果,并分享一些實(shí)用的技巧和示例,需要的朋友可以參考下
2025-01-01
Vue動(dòng)態(tài)表單的應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)表單的應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue組件通信之父?jìng)髯优c子傳父詳細(xì)講解
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-10-10