vue中input框的禁用和可输入问题
更新时间：2022年04月24日 10:26:21 作者：kitesr
这篇文章主要介绍了vue input框的禁用和可输入问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近做了一个手机端系统，其中遇到了父页面需要携带参数跳转至子页面的问题，现已解决，下面分享一下实现过程，感兴趣的朋友一起看看吧2021-04-04
今天小编就为大家分享一篇vue自定义指令实现仅支持输入数字和浮点型的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
本篇文章主要介绍了初步认识理解Vuex，Vuex就是在一个项目中，提供唯一的管理数据源的仓库,有兴趣的可以了解一下2017-04-04
在Vue 3中,跨页面传值可以通过多种方式实现,具体选择哪种方法取决于应用的具体需求和页面间的关系,本文列举了几种常见的跨页面传值方法,感兴趣的同学跟着小编来看看吧2024-04-04
本篇文章主要介绍了Vue.js上下滚动加载组件的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
el-select与el-tree结合使用实现树形结构多选框
我们在实际开发中需要用到下拉树,elementUI是没有这个组件的,我们就要自己去写了,下面这篇文章主要给大家介绍了关于el-select与el-tree结合使用实现树形结构多选框的相关资料,需要的朋友可以参考下2022-10-10
本篇文章主要介绍了vue表单绑定实现多选框和下拉列表的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
公司的大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息，本文主要介绍了Vue大屏数据展示示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
网页中滑动图片验证一直是各大网站、移动端的主流校验方式，其主要作用是为了区分人和机器以及为了防止机器人程序暴力登录或攻击从而设置的一种安全保护方式，这篇文章主要介绍了vue 实现左滑图片验证,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue中倒计时组件的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
最新评论