vue中如何禁止input框和textarea编辑

更新时间：2022年04月24日 10:39:32 作者：weixin_33676492

这篇文章主要介绍了vue中如何禁止input框和textarea编辑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

如何禁止input框和textarea编辑

在我们开发项目的时候，有时候我们不希望用户对我们的页面进行操作，尤其是输入框之类的，这时候我们需要设置一下

第一种方法

<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,用到此方法的好处是：当输入框被禁止以后有灰色的背景色

根据项目的需求，不同的需求所用的方法不同，

拓展：

禁止文本域拖动：resize:none
禁止有滚动条：overflow:hidden

说说input无法输入原因

没有设定初始值 v-model

动态循环绑定值时需要使用

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

强制更新视图

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue中禁止编辑的常见方法(以禁止编辑输入框为例)

vue实现悬浮球效果
这篇文章主要为大家详细介绍了vue实现悬浮球效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue+element tabs选项卡分页效果
这篇文章主要为大家详细介绍了vue+element tabs选项卡分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
vue在 for 循环里使用异步调用 async/await的方法
大家都遇到这样的问题,在使用函数的async/await异步调用时候,放在正常函数中单个调用时没有问题的,但是await放在forEach()循环里面就会报错,本文给大家介绍vue 如何在 for 循环里面使用异步调用 async/await,感兴趣的朋友一起看看吧
2023-10-10
vue-cli脚手架config目录下index.js配置文件的方法
下面小编就为大家分享一篇vue-cli脚手架config目录下index.js配置文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
element使用自定义icon图标的两种解决方式
因为安装原型图设计实现页面,在element自带的图标库好像没有,所以按钮的图标icon需要自定义,下面这篇文章主要给大家介绍了关于element使用自定义icon图标的两种解决方式,需要的朋友可以参考下
2022-07-07
vue学习笔记之v-if和v-show的区别
本篇文章主要介绍了vue学习笔记之v-if和v-show的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue结合g6实现树级结构(compactBox 紧凑树)
本文主要介绍了vue结合g6实现树级结构，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
webstorm添加*.vue文件支持
这篇文章主要介绍了webstorm添加*.vue文件支持，webstorm很多的插件内置，不用安装插件，下面尝试用vue和es6做项目，有兴趣的可以了解一下
2018-05-05
详解vuejs之v-for列表渲染
这篇文章主要介绍了详解vuejs之v-for列表渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
深入了解vue中一键复制功能的实现
在现代的Web应用中,用户体验至关重要,而提供简单易用的复制功能是改善用户体验的一项关键功能,本文将为大家详细介绍Vue实现一键复制功能的具体方法,需要的可以参考下
2023-11-11