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'" ? ? />
當read=0時文本框不可用，當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)文章
最近做了一個手機端系統(tǒng)，其中遇到了父頁面需要攜帶參數(shù)跳轉(zhuǎn)至子頁面的問題，現(xiàn)已解決，下面分享一下實現(xiàn)過程，感興趣的朋友一起看看吧2021-04-04
vue自定義指令實現(xiàn)僅支持輸入數(shù)字和浮點型的示例
今天小編就為大家分享一篇vue自定義指令實現(xiàn)僅支持輸入數(shù)字和浮點型的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
本篇文章主要介紹了初步認識理解Vuex，Vuex就是在一個項目中，提供唯一的管理數(shù)據(jù)源的倉庫,有興趣的可以了解一下2017-04-04
Vue3實現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實現(xiàn),具體選擇哪種方法取決于應(yīng)用的具體需求和頁面間的關(guān)系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學(xué)跟著小編來看看吧2024-04-04
本篇文章主要介紹了Vue.js上下滾動加載組件的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
el-select與el-tree結(jié)合使用實現(xiàn)樹形結(jié)構(gòu)多選框
我們在實際開發(fā)中需要用到下拉樹,elementUI是沒有這個組件的,我們就要自己去寫了,下面這篇文章主要給大家介紹了關(guān)于el-select與el-tree結(jié)合使用實現(xiàn)樹形結(jié)構(gòu)多選框的相關(guān)資料,需要的朋友可以參考下2022-10-10
本篇文章主要介紹了vue表單綁定實現(xiàn)多選框和下拉列表的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
公司的大數(shù)據(jù)工作組就需要通過數(shù)據(jù)大屏展示一些處理過后有價值的信息，本文主要介紹了Vue大屏數(shù)據(jù)展示示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
網(wǎng)頁中滑動圖片驗證一直是各大網(wǎng)站、移動端的主流校驗方式，其主要作用是為了區(qū)分人和機器以及為了防止機器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護方式，這篇文章主要介紹了vue?實現(xiàn)左滑圖片驗證,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中倒計時組件的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07