vue怎么實現(xiàn)input框禁止輸入標簽

這篇“vue怎么實現(xiàn)input框禁止輸入標簽”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue怎么實現(xiàn)input框禁止輸入標簽”文章吧。

vue input框禁止輸入標簽

<input type="search" placeholder="請輸入內(nèi)容" 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是我們經(jīng)常使用的文本輸入框，在vue中我們可以用v-model來綁定輸入框的值，但是有時我們拿到一個值并通過v-model綁定到一個input框里，但是我們只想要顯示這個值，不能修改，然后在某些特定的情況下在去改變這個值，這個時候就牽涉到文本框的禁用了

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

當read=0時文本框不可用，當read=1時文本框可用

以上就是關(guān)于“vue怎么實現(xiàn)input框禁止輸入標簽”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。