当前位置: 首页 > news >正文

vue中,设置全局的 input 为只读状态,并改变输入框背景色

一、需求

vue中,当获取到参数check等于1时,设置全局的 input 为只读状态,并改变输入框背景色

二、代码

<template><div><input type="text" :readonly="isReadOnly" :style="{ backgroundColor: inputBackgroundColor }"></div>
</template><script>
export default {data() {return {check: 1 // 假设check的初始值为1};},computed: {isReadOnly() {return this.check === 1; // 根据check的值确定是否设置为只读状态},inputBackgroundColor() {return this.check === 1 ? 'lightgray' : 'white'; // 根据check的值确定背景颜色}},mounted() {if (this.$route.query.check) {this.check = this.$route.query.check //仅查看}},
}
</script>

完成~

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • AWS无服务器 应用程序开发—第四章 数据库(Amazon DynamoDB)
  • 关于下载 IDEA、WebStorm 的一些心得感想
  • 统信UOS屏蔽mysql显性的用户名称以及密码
  • vue技巧(十)全局配置使用(打包后可修改配置文件)
  • Hash算法、MD5算法、HashMap
  • SpringBoot 升级到2.4.0以上版本跨域设置
  • AForge.NET介绍
  • 如何用PlayCanvas打造一个令人惊叹的3D模型在线展示
  • 如何在隔离环境中设置 LocalAI 以实现 GPU 驱动的文本嵌入
  • 如何基于Nginx配置代理服务器实现邮件告警
  • ReentrantLock的非公平锁(NonfairSync)深度解析:源码之旅与实战策略
  • 三十五、 欧盟是如何对法律政策环境进行评估的?
  • 个股场外期权个人如何参与买卖?
  • 什么是电表无人抄表?
  • 融资融券是什么?深入解析股市杠杆交易!
  • (ckeditor+ckfinder用法)Jquery,js获取ckeditor值
  • 2018天猫双11|这就是阿里云!不止有新技术,更有温暖的社会力量
  • go append函数以及写入
  • HTTP--网络协议分层,http历史(二)
  • JAVA_NIO系列——Channel和Buffer详解
  • java第三方包学习之lombok
  • oschina
  • Webpack 4 学习01(基础配置)
  • 程序员该如何有效的找工作?
  • 区块链将重新定义世界
  • 自动记录MySQL慢查询快照脚本
  • 最近的计划
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • # Kafka_深入探秘者(2):kafka 生产者
  • # windows 运行框输入mrt提示错误:Windows 找不到文件‘mrt‘。请确定文件名是否正确后,再试一次
  • #Linux(权限管理)
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • (pojstep1.1.2)2654(直叙式模拟)
  • (zt)最盛行的警世狂言(爆笑)
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • (附源码)SSM环卫人员管理平台 计算机毕设36412
  • (图)IntelliTrace Tools 跟踪云端程序
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)C语言家族扩展收藏 (转)C语言家族扩展
  • (转)编辑寄语:因为爱心,所以美丽
  • (转载)PyTorch代码规范最佳实践和样式指南
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .bat批处理(十):从路径字符串中截取盘符、文件名、后缀名等信息
  • .describe() python_Python-Win32com-Excel
  • .FileZilla的使用和主动模式被动模式介绍
  • .net core IResultFilter 的 OnResultExecuted和OnResultExecuting的区别
  • .NET 常见的偏门问题
  • .net/c# memcached 获取所有缓存键(keys)
  • .NET/C# 阻止屏幕关闭,阻止系统进入睡眠状态
  • .Net程序帮助文档制作
  • @NestedConfigurationProperty 注解用法
  • [ vulhub漏洞复现篇 ] ECShop 2.x / 3.x SQL注入/远程执行代码漏洞 xianzhi-2017-02-82239600
  • [ 渗透工具篇 ] 一篇文章让你掌握神奇的shuize -- 信息收集自动化工具
  • [000-01-022].第03节:RabbitMQ环境搭建