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

uniapp-form表单

在这里插入图片描述

<template><view class="ptb-20 plr-30 bg min100"><view class="bg-white radius-20 pd-30"><view class="bold mt-30 mb-50 size-32">选择方式:</view><u--form labelPosition="left" :model="form" :rules="rules" ref="uForm"><u-form-item label="题量" prop="number" @click="showPop(1)"><u--input v-model="form.number" disabled disabledColor="#ffffff" placeholder="请选择做题数量"border="none"></u--input><u-icon slot="right" name="arrow-right"></u-icon></u-form-item><u-form-item label="模式" prop="mode" @click="showPop(2)"><u--input v-model="form.mode" disabled disabledColor="#ffffff" placeholder="请选择做题模式" border="none"></u--input><u-icon slot="right" name="arrow-right"></u-icon></u-form-item><u-form-item label="排序" prop="order"><u-radio-group v-model="form.order" placement="row"><u-radio class="mr-20" label="顺序" name='0'></u-radio><u-radio label="降序" name='1'></u-radio></u-radio-group></u-form-item></u--form><u-action-sheet :show="show" :actions="actions" title="请选择" @close="close" @select="confirmSelect"></u-action-sheet><view class="flex mt-120"><u-button @click="back" class="mr-120" text="返回主页"></u-button><u-button @click="toAnswer" type="primary" text="开始练习"></u-button></view></view></view>
</template><script>export default {data() {return {show: false,type: null, // 1数量 2模式form: {number: '',mode: '',order: '0'},actions: [],rules: {'number': {type: 'number',required: true,message: '请选择做题数量',trigger: ['blur', 'change']},'mode': {type: 'string',required: true,message: '请选择做题模式',trigger: ['blur', 'change']},},};},methods: {showPop(type) {this.type = typethis.show = trueif (type == 1) {this.actions = [{name: 5,},{name: 10,},{name: 15,}, {name: 20,},]} else {this.actions = [{name: '题目难度',},{name: '做错时间',},{name: '随机',},]}},close() {this.show = falsethis.type = null},confirmSelect(e) {this.form[this.type == 1 ? 'number' : 'mode'] = e.namethis.$refs.uForm.validateField(this.type == 1 ? 'number' : 'mode')},toAnswer() {this.$refs.uForm.validate().then(res => {uni.navigateTo({url: "/pages/subject/answerItem?type=3&query=" + encodeURIComponent(JSON.stringify(this.form))})}).catch(errors => {})},back() {uni.navigateBack()},},onReady() {//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。this.$refs.uForm.setRules(this.rules)},};
</script>

相关文章:

uniapp-form表单

<template><view class"ptb-20 plr-30 bg min100"><view class"bg-white radius-20 pd-30"><view class"bold mt-30 mb-50 size-32">选择方式&#xff1a;</view><u--form labelPosition"left" :mod…...

漏洞挖掘-利用

一、文章简介 整合一些web漏洞&#xff0c;以及对漏洞的理解。 二、Web漏洞 1.SQL注入 &#xff08;1&#xff09;定义 开发者程序编写过程中&#xff0c;对传入用户数据过滤不严格&#xff0c;将可能存在的攻击载荷拼接到SQL查询语句当中&#xff0c;再将这些查询语句传递到…...

React钩子函数之useDeferredValue的基本使用

在React中&#xff0c;使用钩子函数可以方便地管理组件的状态和副作用。useDeferredValue是React 18中新引入的钩子函数之一&#xff0c;它可以帮助我们优化渲染性能&#xff0c;让组件更加流畅。 useDeferredValue的作用是将一个值延迟更新。这个值可以是状态、属性或其他变量…...

lodash常用方法

cloneDeep 克隆 import { cloneDeep&#xff0c;reduce } from lodash; const b {c:1} const a cloneDeep(b)debounce 防抖 import { debounce } from lodash; debounce(() > {}, 300, { trailing: true })()omit方法删除指定属性&#xff0c;返回一个新的对象 import …...

QByteArray与结构体之间相互转换

Qt项目会碰到自定义结构体和字符数组之间的转换问题&#xff0c;不妨假设结构体名字为custom_struct, 字符数组名字为array_data QByteArray转换为自定义结构体 custom_struct *struct_data reinterpret_cast<custom_struct *>(array_data.data());自定义结构体转换为…...

npm如何安装淘宝镜像

通过命令配置 这种方法是通过修改npm的全局配置文件&#xff0c;将默认的镜像源改为淘宝镜像。具体步骤如下&#xff1a; 打开终端&#xff0c;输入以下命令&#xff0c;设置淘宝镜像源&#xff1a;&#xff08;windowr&#xff09; npm config set registry https://registr…...

从项目中突显技能:在面试中讲述你的编程故事

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

python的观察者模式案例

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言二、具体代码写在结尾 前言 最近写安卓的代码比较多&#xff0c;了解了java代码的注册回调机制&#xff0c;也就是观察者模式&#xff0c;搜索了一下python也有…...

C语言——类型转换

数据有不同的类型&#xff0c;不同类型数据之间进行混合运算时涉及到类型的转换问题。 转换的方法有两种&#xff1a; 自动转换(隐式转换)&#xff1a;遵循一定的规则&#xff0c;由编译系统自动完成强制类型转换&#xff1a;把表达式的运算结果强制转换成所需的数据类型 语法格…...

jmeter性能测试入门完整版

1. Jmeter简介 Apache JMeter是一款纯java编写负载功能测试和性能测试开源工具软件。相比Loadrunner而言&#xff0c;JMeter小巧轻便且免费&#xff0c;逐渐成为了主流的性能测试工具&#xff0c;是每个测试人员都必须要掌握的工具之一。 本文为JMeter性能测试完整入门篇&…...

报错sql_mode=only_full_group_by

首发博客地址 https://blog.zysicyj.top/ 报错内容 ### The error may exist in file[D:\code\cppCode20221025\leader-system\target\classes\mapper\system\TJsonDataMapper.xml] ### The error may involve defaultParameterMap ### The error occurred while…...

伪造 IP 地址的原理和防范措施

在数字化时代&#xff0c;网络安全是至关重要的话题。其中&#xff0c;伪造 IP 地址是一种可能导致网络攻击和欺诈的技术手段。这里将深入探讨伪造 IP 地址的原理以及如何采取措施来防范这种风险。 一.伪造 IP 地址的原理 伪造 IP 地址是一种操纵网络通信的方式&#xff0c;它…...

Linux通过libudev获取挂载路径、监控U盘热拔插事件、U盘文件系统类型

文章目录 获取挂载路径监控U盘热拔插事件libusb 文件系统类型通过挂载点获取挂载路径添libudev加库 获取挂载路径 #include <stdio.h> #include <libudev.h> #include <string.h>int main() {struct udev *udev;struct udev_enumerate *enumerate;struct ud…...

【会议征稿】2023智能通信与网络国际学术会议(ICN 2023)

2023智能通信与网络国际学术会议&#xff08;ICN 2023&#xff09; 2023 International Conference on Intelligent Communication and Networking (ICN2023) 2023智能通信与网络国际学术会议&#xff08;ICN 2023&#xff09;将于2023年11月10-12日在中国常州召开。ICN 2023…...

Android投屏总结

#android手机投屏 ####导语 至于手机投屏的实现方法可谓五花八门&#xff0c;今天小袁就说下以开发人员的角度来说下当今手机的主流投屏方法。目前这种将终端信号经由WiFi传输到电视、电视盒的技术有三种&#xff1a;DLNA、AirPlay、Miracast、Google Cast。 ##手机投屏智能电…...

vue2 组件组成部分,组件通信,进阶语法

一、学习目标 1.组件的三大组成部分&#xff08;结构/样式/逻辑&#xff09; ​ scoped解决样式冲突/data是一个函数 2.组件通信 组件通信语法父传子子传父非父子通信&#xff08;扩展&#xff09; 4.进阶语法 v-model原理v-model应用于组件sync修饰符ref和$refs$nextTic…...

信看课堂笔记—LDO和DC-DC电路打PK

LDO&#xff08;low dropout voltage regulator&#xff0c;低压差线性稳压器&#xff09;和DC-DC(Direct current-Direct current converter&#xff0c;直流电压转直流电压转换器)电源是非常常见的电源电路&#xff0c;LDO 出来的比较早&#xff0c;像老戏骨一样&#xff0c;…...

C++ Day6

目录 一、菱形继承 1.1 概念 1.2 格式 二、虚继承 2.1 作用 2.2 格式 2.3注意 三、多态 3.1函数重写 3.2 虚函数 3.3 赋值兼容规则 3.4 多态中&#xff0c;函数重写的原理 3.5 虚析构函数 3.5.1 格式 3.6 纯虚函数 3.6.1格式 四、抽象类 五、模板 5.1模板的特…...

分布式系统与微服务的区别是什么?

分布式系统和微服务是两个相关但不同的概念&#xff0c;它们都是在构建复杂的软件应用时使用的架构思想。 分布式系统&#xff1a; 分布式系统是指由多个独立的计算机或服务器通过网络连接共同工作&#xff0c;协同完成一个任务或提供一个服务。在分布式系统中&#xff0c;各个…...

python:用python构建一个物联网平台

要使用Python构建物联网平台&#xff0c;您需要考虑以下步骤&#xff1a; 确定平台的基本要求和功能 首先&#xff0c;您需要明确您将要构建的平台的功能和特点。例如&#xff0c;您可能需要支持多种设备&#xff0c;并使用各种传感器来收集数据。您可能需要实现实时数据可视化…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...