iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中input框的禁用和可输入问题
  • 855
分享到

vue中input框的禁用和可输入问题

2024-04-02 19:04:59 855人浏览 泡泡鱼
摘要

目录input框的禁用和可输入关于输入框的一些操作input框的禁用和可输入 input是我们经常使用的文本输入框,在Vue中我们可以用v-model来绑定输入框的值,但是有时我们拿

input框的禁用和可输入

input是我们经常使用的文本输入框,在Vue中我们可以用v-model来绑定输入框的值,但是有时我们拿到一个值并通过v-model绑定到一个input框里,但是我们只想要显示这个值,不能修改,然后在某些特定的情况下在去改变这个值,这个时候就牵涉到文本框的禁用了

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

当read=0时文本框不可用,当read=1时文本框可用

关于输入框的一些操作

  • 关于输入框
  • 监听输入
  • 失去焦点的事件
<template>
  <div class="orderinfo">
 
  <input type="text" v-model="text" @blur="blur()">
  </div>
</template>
<script>
export default {
  name: "Orderinfo",
  data() {
    return {
      text:''
    };
  },
 
  mounted() {},
  watch: {
    // 监听输入框输入
    text: function(val) {
      if (val.length > 0) {
        console.log('显示删除')
      } else {
         console.log('不显示删除')
      }
    }
  },
 
  methods: {
    //失去焦点
    blur(){
      console.log(this.text)
    }
  }
};
</script>
<style scoped lang="sCSS"> 
</style>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中input框的禁用和可输入问题

本文链接: https://www.lsjlt.com/news/147085.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作