助记词 、unipp-程序员宅基地

技术标签： 前端  javascript  开发语言  

助记词输入框的基础逻辑，可以根据自己需求自行改变。

根据循环的div随机生成不固定位置的4个input输入框，再次点击生成8个，以此类推。

需求原型。。。

 

<template>
  <view>
    <view v-for="(item, index) in views" :key="index" :class="{ 'input-box': item.isInput }">
      <!-- 根据需要显示不同的内容 -->
      <input v-if="item.isInput" type="text" placeholder="请输入内容" v-model="item.inputValue" @change="shuruchange"/>
      <view v-else>
        普通视图
      </view>
    </view>
	<!-- 下一步 -->
    <button @click="replaceWithInput">Next</button>
	<!-- 输入完确认按钮 -->
    <button @click="getInputValues">Confirm</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      views: Array(12).fill({ isInput: false, inputValue: '' }), // 初始化12个视图，默认非输入框
      inputCount: 4 // 初始点击一次显示4个输入框
    };
  },
  methods: {
    replaceWithInput() {
      // 将所有视图重置为非输入框状态
      this.views.forEach((item, index) => {
        this.$set(this.views, index, { isInput: false, inputValue: '' });
      });

      // 获取随机的索引
      const randomIndexes = this.getRandomIndexes(this.inputCount);

      // 将对应索引的视图切换为输入框
      randomIndexes.forEach(index => {
        this.$set(this.views, index, { isInput: true, inputValue: '' });
      });

      // 更新inputCount，下次点击显示的数量加倍
      this.inputCount *= 2;
	  
	 
    },
    getRandomIndexes(count) {
      const indexes = Array.from({ length: this.views.length }, (_, index) => index);
      for (let i = indexes.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [indexes[i], indexes[j]] = [indexes[j], indexes[i]];
      }
      return indexes.slice(0, count);
    },
	getInputValues() {
	      this.views.forEach((item, index) => {
	        if (item.isInput) {
	          console.log(`Input ${index + 1}: ${item.inputValue}`);
	          // 在这里可以处理输入框的值，比如保存到数组中或发送到服务器等
	        }
	      });
	    },
  }
};
</script>

<style>
/* 根据需要设置样式 */
.input-box {
  border: 1px solid #ccc;
  padding: 8px;
  margin: 4px;
}
</style>

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49516521/article/details/135727438

智能推荐

Linux磁盘格式化_linux格式化磁盘-程序员宅基地

文章浏览阅读1.7w次，点赞3次，收藏41次。Linux磁盘格式化_linux格式化磁盘

Zigbee联盟基础知识普及-程序员宅基地

文章浏览阅读1.2k次。做智能家居，还要了解ZigBee联盟，不是做好产品就好吗，与ZigBee联盟有什么关系?在具体说明这个问题之前，我们不妨先来了解一下ZigBee。ZigBee实际是一种短距离、低功耗的无线通信技术，名称来源于 ZigZag——一种蜜蜂的肢体语言。当蜜蜂新发现一片花丛后会用特殊舞蹈来告知同伴发现的食物种类及位置等信息，是蜜蜂群体间一种简单、高效的传递信息..._zigbee联盟

分段线性插值法matlab,matlab实现lagrange插值和分段线性插值-程序员宅基地

文章浏览阅读1.7k次。《matlab实现lagrange插值和分段线性插值》由会员分享，可在线阅读，更多相关《matlab实现lagrange插值和分段线性插值(4页珍藏版)》请在人人文库网上搜索。1、数值分析作业姓名：虞驰程题目：函数：fx=11+x2在-5,5上，取n=10，对其进行分段线性插值和拉格朗日插值，在Matlab中实现且绘图。Matlab实现：首先定义函数f，在Matlab中用function.m文件编...

DAY26：GetShell专题_lzcms_v1.1.5后台文件上传getshell-程序员宅基地

文章浏览阅读1k次。BEES企业网站管理系统 getshell实验、海洋影视网站-getshell实验、Lzcms_v1.1.5 后台文件上传getshell、phpmyadmin 4.8.1 远程文件包含漏洞（CVE-2018-12613）、骑士CMS模版注入+文件包含getshell、Apache Shiro 1.2.4反序列化漏洞（CVE-2016-4437）、远程文件包含getshell实战靶场（云演环境）、emlog备份数据库漏洞..._lzcms_v1.1.5后台文件上传getshell

vscode 注释多行代码_如何在Visual Studio Code中注释多行？-程序员宅基地

文章浏览阅读1.5w次。我找不到在Visual Studio Code中注释和取消注释多行代码的方法。是否可以使用某些快捷方式在Visual Studio Code中注释和取消注释多行？ 如果是，该怎么办？当其中一行已被注释时，如何注释多行htmlShift + Alt + A在这里您可以找到所有键盘快捷键。所有VSCode快捷方式PS：我喜欢使用Ctrl + Shift + /来切换块注释，因为Ctrl + /是切换行..._vscode多行注释

swift dictionary 是否存在key_swift dictionary判断是否包含key-程序员宅基地

文章浏览阅读3.5k次。var temp = str["Str"] //访问字典不存在的key ,返回值为nilvar temp1 = str["str"] //访问字典存在的key,返回对应的value_swift dictionary判断是否包含key

随便推点

MMlab实验室AI实战营-人体姿态估计与MMPose_人体姿态估计直接回归方法流程-程序员宅基地

文章浏览阅读432次。当骨骼发生变化时，特定关节点的位置变化对人体表面不同顶点（Vertex）的位置变化有不同影响，在混合蒙皮技术里，这种影响是由不同的权重实现的。两个阶段的检测共用了一个图像特征网络，设计了Spatial Transform Network(STN)模块，从完整的特征图中裁剪出单人对应的图像特征，用于后续关键点检测。设计思路：准去的姿态估计需要结合不同尺度的信息：局部信息（检测不同的身体组件）、全局信息（建模组件之间的关系，在大尺度变形、遮挡时也可以准确推断出姿态）绝对坐标：各关节点在相机坐标系中的坐标；_人体姿态估计直接回归方法流程

Pytorch Dataloader 模块源码分析（二）：Sampler / Fetcher 组件及 Dataloader 核心代码-程序员宅基地

文章浏览阅读712次。总算写完了 DataLoader 部分，总结这一块的源码主要是因为公司最近用到了相关的业务，需要对 Dataset 和 DataLoader 进行改造，因此认真读了这一部分的源码。总而言之，Dataset 和 DataLoader 模块为整个 Pytorch 提供了通用的数据加载和预处理接口，整体代码有很高的鲁棒性。如果说这个模块还有什么可以改进的地方，主要就在于 I/O 的部分，Dataset 在实现 shuffle 操作时，加载数据使用的是随机 I/O，这会大幅降低 I/O。...

Asp类型判断及数组打印-程序员宅基地

文章浏览阅读504次。ASP类型判断TypeName 函数返回一个字符串，提供有关变量的 Variant 子类型信息。TypeName(varname)必选项的 varname 参数，可以是任何变量。返回值TypeName 函数返回值如下：值 描述Byte 字节值Integer 整型值Long 长整型值Single 单精度浮点值Double 双精度浮点值Currency 货币值Dec...

Adroid Studio 2022.3.1 版本配置greendao提示无法找到_plugin with id 'org.greenrobot.greendao' not found-程序员宅基地

文章浏览阅读647次。之前报错，主要就是id 'org.greenrobot.greendao'这个包无法找到，找不到的原因就是org.greenrobot:greendao-gradle-plugin:3.3.1需要添加到整个项目模块的配置文件build.gradle(module)中，我一直在app配置文件。在配置greendao的过程中，在网上寻找各种方法去配置都显示错误：Plugin with id 'org.greenrobot.greendao' not found.中的添加的，所以一直无法找到。_plugin with id 'org.greenrobot.greendao' not found

esxi查看许可过期_解决Vsphere Client 60天过期问题-程序员宅基地

文章浏览阅读2.7k次。步骤：使用Vcenter client登陆试图---系统管理---许可---许可证秘钥右键----管理vsphere许可证秘钥，然后一步步添加。注册机：见百度云盘VMWare:vSphere6企业版参考序列号HV4WC-01087-1ZJ48-031XP-9A843NF0F3-402E3-MZR80-083QP-3CKM24F6FX-2W197-8ZKZ9-Y31ZM-1C3LZJZ2E9-6D..._esxi7过期了怎么办

CMake_cmake_module_path-程序员宅基地

文章浏览阅读2k次。查看变量cmake --help-variable CMAKE_MODULE_PATH常用变量CMAKE_MODULE_PATH查看变量后发现该变量默认为空，需要自己定义。这个变量用来定义自己的cmake模块所在的路径。如果工程比较复杂，有可能会自己编写一些cmake模块，这些cmake模块是随工程发布的，为了让cmake在处理CMakeLists.txt时找到这些模块，你需要通过SET指令将cmake模块路径设置一下。比如SET(CMAKE_MODULE_PATH,${PROJECT_SOUR_cmake_module_path

推荐文章

热门文章

相关标签