首页 > 其他分享 >如何从零开始拆解uni-app开发的vue项目(二)

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

时间:2024-03-20 17:30:32浏览次数:32  
标签:vue checked name 检查 app value uni false 设备

昨天书写了一篇如何从零开始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&#

标签:vue,checked,name,检查,app,value,uni,false,设备
From: https://blog.csdn.net/A_nanda/article/details/136881025

相关文章

  • 前端学习-vue学习007-计算属性+Class 与 Style 绑定
    官方教程链接Class与Style绑定Vue专门为class和style的v-bind用法提供了特殊的功能增强<span:class="{done:item.done}">{{item.text}}</span>如果item.done是true,以上代码实际为<span:class="done">{{item.text}}</span>如果item.done是false,......
  • 个人App上架步骤详解
    ​ 想要成功将个人开发的App上架到应用商店,需要经过一系列关键步骤,包括注册开发者账号、准备应用材料、提交审核等。以下将对这些步骤进行详细介绍。   ​一、注册开发者账号在将应用程序发布至应用商店之前,开发者需要注册开发者账号。目前,主要的应用商店包括苹果App......
  • Elasticsearch-Mapping映射
    Mapping映射自动或手动为index中的_doc建立一种数据结构和相关配置动态映射:dynamicmapping,自动为我们建立index,以及对应的mapping,mapping中包含了每个field对应的数据类型,以及如何分词等设置。PUT/web_site/_doc/1{"post_date":"2023-01-01","title":"Thelonger",......
  • vue2 vue-print-nb
    一、安装插件1、npminstallvue-print-nb--save二、引入Vue项目在main.js中添加--全局挂载  importPrintfrom'vue-print-nb'  Vue.use(Print) 三、前端代码一、操作项中的打印按钮<spantitle="打印"><svg-iconicon-class="printer"class=&quo......
  • pinia——vue3的状态管理工具
    简介Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态。主要优点Vue2和Vue3都支持,这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。pinia中只有state、getter、action,抛弃了Vuex中的Mutation,Vuex中mutation一直都不太受小伙伴们的待见,pinia直接抛弃它了,这无疑......
  • 旅游卡APP软件系统微信小程序开发搭建
    随着数字科技的快速发展,我们正迎来一个全新的数字营销时代。在这个时代,人工智能、大数据、区块链等新兴技术正在以前所未有的速度改变着营销行业。那么,这些新兴技术将如何影响未来的数字营销呢?本文将从新兴技术的视角出发,深入探讨数字营销的未来趋势。一、背景介绍旅游卡APP......
  • VsCode中高效书写Vue3代码的插件
    Vue-Official(原Volar)就是原先的Volar,现已弃用。Vue-Official提供的功能:语法高亮:Vue-Official扩展可以为Vue单文件组件(.vue文件)中的HTML、CSS和JavaScript部分提供语法高亮,使代码更易于阅读和编写。代码片段:Vue-Official扩展提供了丰富的Vue.js相关的......
  • 【Vue3】组件通信以及各种方式的对比
    方式一:props「父」向「子」组件发送数据父组件:定义需要传递给子组件的数据,并使用v-bind指令将其绑定到子组件的props上。<template><child-component:message="parentMessage"/></template><scriptsetup>importChildComponentfrom'./ChildComponent.......
  • php 对接Unity海外广告平台收益接口Reporting API
    今天对接的是Unity广告reportingapi接口,拉取广告收益回来自己做统计。记录分享给大家首先是文档地址,进入到Unity后台就能看到文档地址以及参数:文档地址:https://docs.unity.com/ads/en-us/manual/MonetizationStatsAPI在这里插入图片描述接入这些第三方广告平台,流程基......
  • vue3 项目接入keycloak
    之前都是vue2项目接入keycloak,网上表较多资料参考,vue3得比较少记录一下。这个前端项目是jetlinks社区版。引入了 dsb-norge/vue-keycloak-js插件, https://github.com/dsb-norge/vue-keycloak-js,还是要看官方得文档、示例。1.官方提供得示例比较全,我需要得是vue3typescri......