vue中input框的禁用和可輸入問題
更新時間：2022年04月24日 10:26:21 作者：kitesr
這篇文章主要介紹了vue input框的禁用和可輸入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
input框的禁用和可輸入
input是我們經(jīng)常使用的文本輸入框，在vue中我們可以用v-model來綁定輸入框的值，但是有時我們拿到一個值并通過v-model綁定到一個input框里，但是我們只想要顯示這個值，不能修改，然后在某些特定的情況下在去改變這個值，這個時候就牽涉到文本框的禁用了
? ?<input ? ? ? type="text"http://綁定的值 ? ? ? v-model="Copy.possWord1" ? ? ? :readonly="read ? false : 'readonly'" ? ? />
當(dāng)read=0時文本框不可用，當(dāng)read=1時文本框可用
關(guān)于輸入框的一些操作
- 關(guān)于輸入框
- 監(jiān)聽輸入
- 失去焦點的事件
<template> ? <div class="orderinfo"> ? ? <input type="text" v-model="text" @blur="blur()"> ? </div> </template>
<script>
export default {
? name: "Orderinfo",
? data() {
? ? return {
? ? ? text:''
? ? };
? },
?
? mounted() {},
? watch: {
? ? // 監(jiān)聽輸入框輸入
? ? text: function(val) {
? ? ? if (val.length > 0) {
? ? ? ? console.log('顯示刪除')
? ? ? } else {
? ? ? ? ?console.log('不顯示刪除')
? ? ? }
? ? }
? },
?
? methods: {
? ? //失去焦點
? ? blur(){
? ? ? console.log(this.text)
? ? }
? }
};
</script><style scoped lang="scss">? </style>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue配置后臺接口方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了Vue?非常實用的自定義指令分享，Vue自定義指令有全局注冊和局部注冊兩種方式，在?Vue，除了核心功能默認(rèn)內(nèi)置的指令?(?v-model?和?v-show?)，Vue?也允許注冊自定義指令，下文小編給大家分享那些常用到的Vue自定義指令2022-02-02
element UI 中的 el-tree 實現(xiàn) checkbox&n
在日常項目開發(fā)中，會經(jīng)常遇到，樹形結(jié)構(gòu)的查詢方式，為了快速方便開發(fā)，常常會使用到快捷的ui組件去快速搭樹形結(jié)構(gòu)，這里我用的是 element ui 中的 el-tree，對element UI 中的 el-tree 實現(xiàn) checkbox 單選框及 bus 傳遞參數(shù)的方法感興趣的朋友跟隨小編一起看看吧2022-09-09
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實現(xiàn)簡單的鎖屏功能，文中的示例代碼講解詳細(xì)，具有一定的參考價值，需要的小伙伴可以了解一下2023-06-06
這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue.config.js常用配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue 如何獲取視頻第一幀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue+element 商品列表、新增、編輯、刪除業(yè)務(wù)實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Vue中的nextTick作用和幾個簡單的使用場景，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01