在日常工作和生活中，相信很多大佬和我一样，到了饭点，还不知道中午应该吃什么吧，选择来选择去，既费时又费时，不如让我们用vue来写个随机选择器替我们做抉择吧。
各位前端大佬不要笑话，运维小弟献丑了。
效果展示
码上掘金
运行效果
初始化项目
若你已经使用过码上掘金，可以跳过本段落，直接看下一段落【页面编写】
我们打开【码上掘金】(code.juejin.cn/) ，创建一个空白项目。
我们选择【新建代码片段】【新建空白片段】就可以创建一个新的项目了。
我们的目的是为了编写vue.js，所以创建项目后，需要导入vue.js，我们选择Script最右侧的设置按钮。
而后在打开的设置页面中，找到添加依赖资源，我们将vue.js的cdn地址填写进去。
最后我们编写一个测试实例来看下
如上代码是我们新建了一个vue实例，而后在变量中写上表达式3+2，若结果为5，则证明vue环境创建完成了。
页面编写
我们的页面设想设这样的
让用户输入抽取的次数n，而该小项目会从用户输入的数据中随机抽取n个数据，若n大于用户输入的数据，则小提示报错，若用户输入的为空，则小提示报错。
我们来看下如何编写这个页面程序
其实用户输入次数和小提示，都还好，关键是用户输入的数据框 和 随机结果框 ， 它是并排的，我们应该如何做呢？ 最简单的做法是写一个 position将只设置为 absolute 就可以了，我们尝试下个demo看下呢：
如上代码，就将2个div给并排了，有了如上基础，我们很容易写出页面骨架来:
最后我们再加上css修饰，就可以得到如下结果
关于css这块，如果没有系统的去学，调整起来是真的有点复杂，不过我选择面向搜索引擎编程。
vue实例编写
好了，现在页面已经编写完毕，那么我们如何要进行随机赛选，那么要做哪几个步骤呢？
- 收集用户输入的赛选个数
- 收集用户输入的数据
- 点击随机选择，开始随机抽取
收集用户输入的数据，我们可以直接使用v-model就好，而点击随机选择，我们可以定义一个方法来操作。
关于第一步 和 第二步，我们主要设置如下
我们定义下输入数据信息
赛选个数: <input v-model="InputNum" type="number"> <textarea v-model="InputVal" placeholder="输入数据以回车分割" ></textarea>
而在vue中，我们也应该定义变量来接受数据
new Vue({ el: "#app", data: { InputNum: 1, InputVal: "", } })
关于第三步
我们可以在按钮的地方定义一个@click，用于指定对应的方法，例如:
<button @click="choiceVal">开始随机选择</button>
而对于choiceVal函数，我们定义为如下:
choiceVal() { this.val = [] if (this.InputVal == "") { this.msg = "小提示: 你还没有输入数据呢" return } var datas = (this.InputVal).split("\n") if (this.InputNum > datas.length) { this.msg = "小提示: 赛选个数大于输入行数" return } for (let i=0;i<this.InputNum;i++) { let id = Math.floor(Math.random() * datas.length) this.val.push(datas[id]) datas.splice(id,1) } }
如上代码的核心是先将用户输入的数据，利用回车作为切割符，转换为数组，而后利用Math.random产生随机数，来获取数组的下标，再将数据放入已经赛选完成的数据中，而后将数组数据删除掉，理解为图示如下:
而在js代码中，对于数组而言，我们使用splice删除数据，使用push追加数据。
总结
在现实中，我抛一个硬币，它肯定是随机的，要不为正，要不为负。但是在计算机中，我使用随机生成数据，看似随机，真的随机么？ 就是因为不随机，所以市面上才出现了很多产生“硬件数”的硬件，本篇文章没有过多的探究随机生成，请各位大佬在阅读的时候，当做一个小玩意玩玩就好。
是不是感觉有点意思吧，动动你的小手指，来测试测试晚上吃什么吧。
