如何从零开始拆解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&#

相关推荐

  1. 如何开始拆解uni-app开发vue项目

    2024-03-20 20:46:05       41 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-20 20:46:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-20 20:46:05       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-20 20:46:05       82 阅读
  4. Python语言-面向对象

    2024-03-20 20:46:05       91 阅读

热门阅读

  1. Python 中可以用来生成 SVG 图的库

    2024-03-20 20:46:05       44 阅读
  2. linux系统中的PS命令详解

    2024-03-20 20:46:05       47 阅读
  3. 主流开发语言和开发环境介绍

    2024-03-20 20:46:05       39 阅读
  4. DNS劫持怎么预防?

    2024-03-20 20:46:05       45 阅读
  5. 去除项目git的控制 端口号的关闭

    2024-03-20 20:46:05       39 阅读
  6. 对建造者模式的理解

    2024-03-20 20:46:05       35 阅读
  7. 《建造者模式(极简c++)》

    2024-03-20 20:46:05       47 阅读
  8. Doris案例篇—美团外卖数仓中的应用实践

    2024-03-20 20:46:05       43 阅读
  9. 前端面试小节

    2024-03-20 20:46:05       40 阅读