最近在用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显示)。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐