当前位置: 首页 > 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;并使用各种传感器来收集数据。您可能需要实现实时数据可视化…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...