uniapp 动态修改input样式

news2024/11/18 15:39:34

        最近在用HBuilderx工具开发蓝牙调试工具,项目采用uniapp、vue3.0架构,需求设计为在向蓝牙模块发送数据之前,监测input是否为空,如果为空,则input边框橙红色。界面如下图所示:

        uniapp架构采用 .vue格式文件,详细如下:(备注:以下代码列出了针对功能部分)

    <view>
        <input  v-model="inputSendValue" :style="inputStyle" ></input>
    </view>

export default {
        data() {
            return {

                inputSendValue:"",

                inputStyle: {
                   border: "1px solid #30a2a4"
                },

                }

        },

        methods:{

                sendBlueTooth(){

                        if(this.inputSendValue.length>0){

                                 this.inputStyle={  border: "1px solid #30a2a4"}

                                //蓝牙发送函数

                        }else{

                                 this.inputStyle={  border: "1px solid red"}

                        }     

                }

       }

      }

        需要特别注意的是,“inputStyle”只能整体重新赋值,不能使用其属性(this.inputStyle.border)赋值,否则手机端不显示效果(虽然HBuilderx显示)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2162277.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深入解析SGD、Momentum与Nesterov:优化算法的对比与应用

目录 1. 梯度下降算法2. BGD、SGD、MBGD3. momentum与dampening3.1 另一种形式的momentum3.1.1 学习率固定3.1.2 学习率不固定 4. nesterov4.1 PyTorch中的Nesterov4.2 Polyak与Nesterov的比较 Ref 1. 梯度下降算法 先考虑一元情形。假设待更新的参数为 θ \theta θ&#xf…

常见统计量与其抽样分布

什么是统计量 我们首先给出统计量的定义:设 X 1 , X 2 , ⋯ , X n X_1,X_2,\cdots,X_n X1​,X2​,⋯,Xn​ 为来自于总体X的一个样本&#xff0c; g ( X 1 , X 2 , ⋯ , X n ) g(X_1,X_2,\cdots,X_n) g(X1​,X2​,⋯,Xn​) 为关于 X 1 , X 2 , ⋯ , X n X_1,X_2,\cdots,X_n X…

React开发环境搭建以及常见错误解决

‌React开发环境搭建主要包括Node.js安装、编辑器选择、创建React项目等步骤‌。 Node.js安装‌ 从Node.js官网下载并安装最新版本的Node.js&#xff0c;安装过程中npm会自动安装。安装完成后&#xff0c;通过命令行输入node -v和npm -v检查安装是否成功。 carawang%node -v…

JS 特殊运算符有哪些?

JavaScript 特殊运算符有哪些&#xff1f; 众多编程语言之中JavaScript &#xff0c;以其强大而全面的功能深受前端开发者喜爱。其丰富的运算符集&#xff0c;不仅包括了广泛应用的算术运算符、比较运算符以及逻辑运算符&#xff0c;还蕴藏着一系列较为冷门但同样功能强大的运算…

【SSM-Day2】创建SpringBoot项目

运行本篇中的代码&#xff1a;idea专业版或者idea社区版本&#xff08;2021.1~2022.1.4&#xff09;->这个版本主要是匹配插件spring boot Helper的免费版(衰) 【SSM-Day2】创建SpringBoot项目 框架->Spring家族框架快速上手Spring Boot&#x1f4e2;用idea插件创建Sprin…

python文件读写知识简记

简单记录一下python文件读写相关知识 一、打开文件 python使用open函数打开文件&#xff0c;函数原型如下 open(file, moder, buffering-1, encodingNone, errorsNone, newline None, closefdTrue, openerNone) file 文件地址 mode 文件打开模式&#xff0c;可设定为如下的…

harmonyOS ArkTS最新跳转Navigation

文章目录 取消标题栏初始页面(load)设置为竖屏 自定义标题Tabs&TabContentTabs通过divider实现了分割线各种属性 图片下载 官方文档 Entry Component struct Index {State message: string Hello WorldState djs:number 5build() {Column(){Navigation(){}.title("g…

一文详解GB28181、RTSP、RTMP

GB28181 GB28181 即 GB/T28181—2016《公共安全视频监控联网系统信息传输、交换、控制技术要求》。它是公安部提出的公共安全行业标准&#xff0c;在视频监控领域具有重要地位。 主要目的和应用场景&#xff1a; 目的&#xff1a;解决不同厂家的视频监控设备执行各自标准&…

9.24 C++ 常成员,运算符重载

//my_string.cpp #include "my_string.h" #include <iostream> #include <cstring>using namespace std;My_string::My_string():size(15){this->ptr new char[size];this->ptr[0] \0; //表示串为空串this->len 0;}//有参构造My_…

业务数据批量插入数据库实践

业务数据如何存储一直以来都是项目开发中的一个比较重要的话题。我们要从资源的利用率&#xff0c;业务场景和技术实现多个方面考虑存储的问题。“抛开业务谈技术就是耍流氓”&#xff0c;所有技术架构都要站在实际的业务场景中分析。比如个人端的产品&#xff0c;这种就属于读…

代码随想录算法训练营Day7 | 454.四数相加Ⅱ、383.赎金信、15.三数之和、18.四数之和

454.四数相加Ⅱ 题目 454. 四数相加 II - 力扣&#xff08;LeetCode&#xff09; 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums…

weblogic中间件漏洞复现

后台弱口令getshell 1.开启环境 cd vulhub-master/weblogic/weak_password docker-compose up -d docker ps 2.f访问靶场 访问/console/login/LoginForm.jsp这个目录进行登录&#xff0c; 默认账号密码&#xff1a;weblogic/Oracle123 需要注意的是单个账号进行登录时&…

C++_CH18_构造函数与析构函数

C_CH18_构造函数与析构函数 1 类的默认成员函数 在编写类的时候&#xff0c;C编译器会默认生成6个默认的函数&#xff0c;但是不显示出来&#xff1a; 需要关注以下两个方面: 第一:我们不写时&#xff0c;编译器默认生成的函数行为是什么&#xff0c;是否满足我们的需求。 …

LabVIEW界面输入值设为默认值

在LabVIEW中&#xff0c;将前面板上所有控件的当前输入值设为默认值&#xff0c;可以通过以下步骤实现&#xff1a; 使用控件属性节点&#xff1a;你可以创建一个属性节点来获取所有控件的引用。 右键点击控件&#xff0c;选择“创建” > “属性节点”。 设置属性节点为“D…

实践出真知!8个案例速通栅格系统

在现代设计中&#xff0c;栅格系统作为一种重要的布局方案&#xff0c;能够有效提升设计的秩序感。对于 UI 设计领域&#xff0c;栅格系统也广泛用于跨屏幕的响应式设计&#xff0c;帮助设计师打造更好的多端体验。本文将简要介绍栅格系统的基本概念和搭建方法&#xff0c;并提…

什么是unix中的fork函数?

一、前言 在本专栏之前的文档中已经介绍过unix进程环境相关的概念了&#xff0c;本文将开始介绍unix中一个进程如何创建出新进程&#xff0c;主要是通过fork函数来实现此功能。本文将包含如下内容&#xff1a; 1.fork函数简介 2.父进程与子进程的特征 3.如何使用fork创建新进程…

依赖不对应导致java文件不能正常显示

项目中若出现非正常显示的java文件&#xff0c;检查下是否依赖版本不对应。&#xff08;前提必须是maven项目&#xff09;

网络原理(4)——网络层(IP)、数据链路层

1. IP 协议 基本概念&#xff1a; 主机&#xff1a;配有 IP 地址&#xff0c;但是不进行路由控制的设备 路由器&#xff1a;即配有 IP 地址&#xff0c;又能进行路由控制 节点&#xff1a;主机和路由器的统称 IP 协议报头格式 1) 4 位版本&#xff1a;实际上只有两个取值&…

通义灵码AI 程序员正式发布:写代码谁还动手啊

虽然见不到面 但你已深潜我心 前几天&#xff0c;在 2024 年的杭州云栖大会上&#xff0c;随着通义大模型能力的全面提升&#xff0c;阿里云通义灵码这位中国的首位 AI 程序员也迎来重大的升级。 一年前这位 AI 程序员还只能完成基础的编程任务&#xff0c;到现在可以做到几…

Leetcode 543. 124. 二叉树的直径 树形dp C++实现

问题&#xff1a;Leetcode 543. 二叉树的直径&#xff08;边权型&#xff09; 给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。两节点之间路径的 长度 由它们之…