助记词、unipp

最新推荐文章于 2025-08-13 21:05:35 发布

小白有点菜

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量474

点赞数 7

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_49516521/article/details/135727438

本文描述了如何使用Vue.js构建一个动态的界面，通过点击按钮随机在页面上生成并管理不同数量的输入框，用户输入后可通过确认按钮获取并处理这些输入值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

根据循环的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>