不知道中午应该吃什么？用vue写个实例帮我们抉择吧在日常工作和生活中，相信很多大佬和我一样，到了饭点，还不知道中午应该吃

在日常工作和生活中，相信很多大佬和我一样，到了饭点，还不知道中午应该吃什么吧，选择来选择去，既费时又费时，不如让我们用vue来写个随机选择器替我们做抉择吧。

各位前端大佬不要笑话，运维小弟献丑了。

效果展示

运行效果

初始化项目

我们选择【新建代码片段】【新建空白片段】就可以创建一个新的项目了。

我们的目的是为了编写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追加数据。

总结

在现实中，我抛一个硬币，它肯定是随机的，要不为正，要不为负。但是在计算机中，我使用随机生成数据，看似随机，真的随机么？ 就是因为不随机，所以市面上才出现了很多产生“硬件数”的硬件，本篇文章没有过多的探究随机生成，请各位大佬在阅读的时候，当做一个小玩意玩玩就好。

是不是感觉有点意思吧，动动你的小手指，来测试测试晚上吃什么吧。