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

如何从零开始拆解uni-app开发的vue项目(二)

昨天书写了一篇如何从零开始uni-app开发的vue项目,今天准备写一篇处理界面元素动态加载的案例:

背景:有不同类别的设备,每个设备有每日检查项目、每周检查项目、每年检查项目,需要维保人员,根据不同设备和检查类别对检查项目进行处理,提交数据。

首先看一下界面:

<template>
    <view class="bolili">
        <view class="uni-form-item uni-column">
            <view class="title"><text class="uni-form-item__title">设备编码:</text></view>
    
            <view class="uni-input-wrapper">
                <input class="uni-input" focus placeholder="扫描设备二维码" v-model="DriverID"                         @input="SelectDriverData"/>
            </view>

        <button type="primary" @click="SelectDriverData">加载设备信息</button>
        </view>
        <view class="uni-form-item uni-column">
            <view class="title"><text class="uni-form-item__title">点检明细:</text></view>
        </view>
        <view class="uni-list">
            <checkbox-group @change="checkboxChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
                    <view>{{item.name}}</view>
                    <view>
                        <checkbox :value="item.value"  />
                    </view>
                    
                </label>
            </checkbox-group>
        </view>
        <button type="primary" @click="tijiao">提交</button>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                DriverID:"",
                username:"this.$globals.us",
                date:"day",
                tijiaores:0,
                DeviceType:"",
                DJType:"",
                DJContent:"",
                index:0,
                checked:"",
                items: [
                    {
                        value: '1',
                        name: '检查机体接地是否正常',
                        checked:'false'
                    },
                    {
                        value: '2',
                        name: '检查仪器/设备开关机是否正常',
                        checked:'false'
                    },
                    {
                        value: '3',
                        name: '仪器/设备显示屏、按键、传动是否正常',
                        checked:'false'
                    },
                    {
                        value: '4',
                        name: '工作区域是否整洁,干净;是否摆放整齐',
                        checked:'false'
                    },
                    {
                        value: '5',
                        name: '开机检查剥离滑块运行是否正常',
                        checked:'false'
                    },
                    {
                        value: '6&#

http://www.lryc.cn/news/324396.html

相关文章:

  • 【生成对抗网络GAN】一篇文章讲透~
  • 【设计模式】Java 设计模式之模板命令模式(Command)
  • 如何在Flutter中实现一键登录
  • Amazon SageMaker + Stable Diffusion 搭建文本生成图像模型
  • FPGA数字信号处理前沿
  • 【Android】系统启动流程分析 —— init 进程启动过程
  • 抖音视频批量下载软件可导出视频分享链接|手机网页视频提取|视频爬虫采集工具
  • 鸿蒙Harmony应用开发—ArkTS-@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化
  • 深度解析:Elasticsearch写入请求处理流程
  • 数据结构:堆和二叉树遍历
  • [Halcon学习笔记]在Qt上实现Halcon窗口的字体设置颜色设置等功能
  • ArcGis 地图文档
  • 【C语言】动态内存分配
  • 算法思想总结:位运算
  • 四、HarmonyOS应用开发-ArkTS开发语言介绍
  • 3 Spring之DI详解
  • Web框架开发-Ajax
  • Python爬虫之urllib库
  • Docker学习笔记 - 常用命令
  • 数学建模(Topsis python代码 案例)
  • gateway网关指定路由响应超时时间
  • docker 和K8S知识分享
  • MySQL--select count(*)、count(1)、count(列名) 的区别你知道吗?
  • 使用verilog设计实现16位CPU及仿真
  • Python将字符串转换为datetime
  • Vue 3 + TypeScript + Vite的现代前端项目框架
  • 浏览器强缓存和弱缓存的主要区别
  • 深度学习-2.9梯度不稳定和Glorot条件
  • 地宫取宝dfs
  • Ollama 运行 Cohere 的 command-r 模型