vue实现input框禁止输入标签

目录

vue input框禁止输入标签vue input框的禁用和可输入

vue input框禁止输入标签

<input type="search" placeholder="请输入内容" v-model="addTypeVal" :maxlength="5">
<script>
    export default{
         watch:{
            addTypeVal(val){
                let reg = /[^u0020-u007Eu00A0-u00BEu2E80-uA4CFuF900-uFAFFuFE30-uFE4FuFF00-uFFEFu0080-u009Fu2000-u201fu2026u2022u20acrn]/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时文本框可用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易采站长站。