uniapp 动态修改input样式

server/2024/9/30 0:07:28/

        最近在用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.ppmy.cn/server/124714.html

相关文章

uniapp路由跳转

一、uni.navigateTo(object) 保留当前页面&#xff0c;跳转到指定非tabBar页面&#xff0c;如&#xff1a; uni.navigateTo({url:/pages/demo1/demo1, }) 二、uni.redirectTo(object) 关闭当前页面&#xff0c;跳转到指定非tabBar页面&#xff0c;如&#xff1a; uni.redi…

19 基于51单片机的倒计时音乐播放系统设计

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 五个按键&#xff0c;分别为启动按键&#xff0c;则LCD1602显示倒计时&#xff0c;音乐播放 设置按键&#xff0c;可以设置倒计时的分秒&#xff0c;然后加减按键&#xff0c;还有最后一个暂停音乐…

CICD从无到会

一 CICD是什么 CI/CD 是指持续集成&#xff08;Continuous Integration&#xff09;和持续部署&#xff08;Continuous Deployment&#xff09;或持续交付&#xff08;Continuous Delivery&#xff09; 1.1 持续集成&#xff08;Continuous Integration&#xff09; 持续集成是…

大模型+AIGC技术实操:GPT 大模型部署使用 AIGC实战落地方案

一、GPT大模型简介 GPT是基于Transformer架构的预训练语言模型&#xff0c;通过大规模的无监督学习&#xff0c;它已展现出了惊人的文本生成和理解能力。部署GPT大模型意味着将其融入到实际应用中&#xff0c;如智能写作、客服对话、内容推荐等领域。 二、GPT大模型部署步骤 …

Redisearch 入门指南构建高性能搜索应用

1. 概述 Redisearch 是一个强大的全文搜索引擎&#xff0c;基于流行的 Redis 数据库构建&#xff0c;专为高效的数据检索而设计。它结合了 Redis 的快速存储能力和搜索引擎的复杂查询功能&#xff0c;使得开发者能够在海量数据中实现实时搜索体验。Redisearch 支持丰富的特性&…

web前端与koa框架node后端实现分片断点上传

web前端,先选择文件,然后点击上传 html代码如下: <div><input type="file" /><el-button @click="uploadFile()" type="primary">上传</el-button> </div> 上传代码如下 其实也就是每次传50mb,如果网络突然…

【前端】ES7:ES7新特性

文章目录 1 求幂运算符2 数组的includes方法 1 求幂运算符 Math.pow(3, 2) 3 ** 2 // trueconsole.log(3 ** 3) // 272 数组的includes方法 如果仅仅查找数据是否在数组中&#xff0c;建议使用includes&#xff0c;如果是查找数据的索引位置&#xff0c;建议使用indexOf更好…

数组组成的最小数字 - 华为OD统一考试(E卷)

2024华为OD机试(E卷+D卷+C卷)最新题库【超值优惠】Java/Python/C++合集 题目描述 给定一个整型数组,请从该数组中选择3个元素组成最小数字并输出(如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 一行用半角逗号分割的字符串记录的整型数组,0<数…