input是我們經(jīng)常使用的文本輸入框，在vue中我們可以用v-model來(lái)綁定輸入框的值，但是有時(shí)我們拿到一個(gè)值并通過(guò)v-model綁定到一個(gè)input框里，但是我們只想要顯示這個(gè)值，不能修改，然后在某些特定的情況下在去改變這個(gè)值，這個(gè)時(shí)候就牽涉到文本框的禁用了

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

當(dāng)read=0時(shí)文本框不可用，當(dāng)read=1時(shí)文本框可用

關(guān)于輸入框的一些操作

關(guān)于輸入框
監(jiān)聽(tīng)輸入
失去焦點(diǎ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)聽(tīng)輸入框輸入
? ? text: function(val) {
? ? ? if (val.length > 0) {
? ? ? ? console.log('顯示刪除')
? ? ? } else {
? ? ? ? ?console.log('不顯示刪除')
? ? ? }
? ? }
? },
?
? methods: {
? ? //失去焦點(diǎn)
? ? blur(){
? ? ? console.log(this.text)
? ? }
? }
};
</script>

<style scoped lang="scss">?
</style>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3聲明字段名為枚舉的類型詳解
這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
詳解vue配置后臺(tái)接口方式
這篇文章主要介紹了vue配置后臺(tái)接口方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue?非常實(shí)用的自定義指令分享
這篇文章主要介紹了Vue?非常實(shí)用的自定義指令分享，Vue自定義指令有全局注冊(cè)和局部注冊(cè)兩種方式，在?Vue，除了核心功能默認(rèn)內(nèi)置的指令?(?v-model?和?v-show?)，Vue?也允許注冊(cè)自定義指令，下文小編給大家分享那些常用到的Vue自定義指令
2022-02-02
element UI 中的 el-tree 實(shí)現(xiàn) checkbox&n
在日常項(xiàng)目開發(fā)中，會(huì)經(jīng)常遇到，樹形結(jié)構(gòu)的查詢方式，為了快速方便開發(fā)，常常會(huì)使用到快捷的ui組件去快速搭樹形結(jié)構(gòu)，這里我用的是 element ui 中的 el-tree，對(duì)element UI 中的 el-tree 實(shí)現(xiàn) checkbox 單選框及 bus 傳遞參數(shù)的方法感興趣的朋友跟隨小編一起看看吧
2022-09-09
Vue實(shí)現(xiàn)鎖屏功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)簡(jiǎn)單的鎖屏功能，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的小伙伴可以了解一下
2023-06-06
vue2路由中router-view不顯示的原因及踩坑記錄
這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue.config.js常用配置詳解
這篇文章主要介紹了vue.config.js常用配置詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue 如何獲取視頻第一幀
這篇文章主要介紹了vue 如何獲取視頻第一幀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue element商品列表的增刪改功能實(shí)現(xiàn)
這篇文章主要介紹了Vue+element 商品列表、新增、編輯、刪除業(yè)務(wù)實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue中的nextTick作用和幾個(gè)簡(jiǎn)單的使用場(chǎng)景
這篇文章主要介紹了Vue中的nextTick作用和幾個(gè)簡(jiǎn)單的使用場(chǎng)景，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01