欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

vue实现input框禁止输入标签

时间:2022-06-04 12:20:29|栏目:vue|点击:

vue input框禁止输入标签

<input type="search" placeholder="请输入内容" v-model="addTypeVal" :maxlength="5">
<script>
    export default{
         watch:{
            addTypeVal(val){
                let reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
                if(val.match(reg)) {
                   this.addTypeVal = val.replace(reg, '');
                }
            }
        },
    }
</script>

vue input框的禁用和可输入

input是我们经常使用的文本输入框,在vue中我们可以用v-model来绑定输入框的值,但是有时我们拿到一个值并通过v-model绑定到一个input框里,但是我们只想要显示这个值,不能修改,然后在某些特定的情况下在去改变这个值,这个时候就牵涉到文本框的禁用了

<input
   type="text"//绑定的值
   v-model="Copy.possWord1"
   :readonly="read ? false : 'readonly'"
/>

当read=0时文本框不可用,当read=1时文本框可用

上一篇:vue实现目录树结构

栏    目:vue

下一篇:详解@Vue/Cli 3 Invalid Host header 错误解决办法

本文标题:vue实现input框禁止输入标签

本文地址:http://www.codeinn.net/misctech/203706.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有