使用vue给家里的小仔做一个加减练习题吧

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

在培养小孩过程中，其中必不可少的是教小孩加减算法题，这是很基础，这是很重要的，可以锻炼其算术思维。但是我们大人忙的时候，没空给小孩出题。于是乎，我们就可以使用vue给小孩写一个加减练习题。

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

项目代码: code.juejin.cn/pen/7140843…

项目运行效果:

创建项目

我们打开码上掘金(code.juejin.cn/) ，选择【新建代码片段】【新建空白片段】

为什么我们这里新建代码片段的时候不直接选择vue2或者vue3的片段呢？ 因为运维小老弟我还不是很会。只会使用js引用vue。

我们创建新项目后，我们将vue 2的cdn导入进项目中，选择Script右边的设置按钮

点开后，我们将vue的地址填进去。

最后，我们编写代码来验证下，vue环境是否可以正常使用。

如上，我们写了一个很简单的vue，运行起来后，我们发现是可以拿到world变量的值的。

证明我们环境设置没问题，接下来我们看看整个项目的设计吧。

设计思路

我们想做一个比较简单的加减练习册，根据按钮随机更新题目，用户在输入结果后，点击一下别的地方，就开始验证结果，验证结果会给出正确与否，以及小提示，整体设计草图如下:

如上所述，若输入结果为正确的值，则提示√，否则为×。

当题目打错后，我们会输出一个温馨提示，设计如下：

当然回答正确的时候，也应当提示，类似于： “你真棒”这类的话。

上面，便是我们整个项目的核心功能了，最后再设计一个按钮，用于刷新题目使用，设计图类似于：

静态页面编写

如上，我们已经描述了设计思路，接着，我们可以编写静态页面了。通过设计思路，我们不难看出，在整个页面，我们有按钮来作为刷新题目使用，还有一个输入框，用于用户输入计算的结果，我们来分析下呢：

如上，我们可以很容易的编写出静态页面代码：

<div id="app">
  <div>
    3 + 2  =
    <input>
    <p>温馨小提示: </p>
    <br />
    <button>换题</button>
  </div>
</div>

运行后，效果如下:

如上，我们主体框架搭建完毕了，样子不太好看，不要急，我们给穿上CSS外衣就好看了。

这么样，我们加入css样式后，就好看多了吧。

完成主线代码

如上，我们静态页面已经写好了，现在我们接入vue.js，让它变为动态的，那么我们应该如何写呢？ 我们最简单的想法是这样的：

我们使用计算属性，来算出n和m正确的值，再让它和用户输入的值做对比，如果一致，则证明计算正确，否则计算错误。

基于此，我们修改下代码

如上代码我们加入了vue变量,m,n,op最后还定义了一个计算变量realResult。

我们使用v-model来活动用户的结果输入，编写如下

v-model.lazy="inputResult"

其中lazy参数表示只有聚焦离开了输入框，再传参值vue中，相应的，我们在vue.data中也应该写上该变量才行。

我们定义完该变量后，我们可以开始写监听器了，代码如下:

watch: {
  inputResult: {
    handler(newValue){
      this.ok = false
      this.fail = false
      if (this.realResult == newValue) {
        this.ok = true
        this.result_text = "恭喜你，回答正确，结果为: " + this.realResult + "。"
      }else {
        this.fail = true
        this.result_text = "你小子，回答错了，正确的结果为: " + this.realResult + "。"
      } 
    }
  }
}

关于ok、fail等，不在主线内，我们后续会说明。

最后我们就只剩下一个换题了，换题由于是按钮，所以我们可以写一个函数来操作，我们将此函数命名为: changeTitle，我们编写如下:

methods: {
  changeTitle() {
    this.result_text = "请删掉上一题的答案继续答题"
    this.ok = false
    this.fail = false
    
    const ops = Math.floor(Math.random() * 2)
    if (ops == 0) {
      this.op = "+"
    } else {
      this.op = "-"
    }

    this.n1 = Math.floor(Math.random() * 100)
    this.n2 = Math.floor(Math.random() * 100)
  }
}

完善边角料

还记得我们在设计思路的时候，提及到了√和×么？ 以及温馨小提示。

这里我们可以使用vue中的v-if来完成，具体代码如下:

  <input v-if="ok" id="result_ok" disabled="disable" value="√">
  <input v-if="fail" id="result_fail" disabled="disable" value="×">
  <p>温馨小提示: {{result_text}}</p>

关于这里的细节，可以看代码，这里不再赘述。

总结

学习了一段时间前端，不由感叹一句，前端是真的太卷了，知识点太多了，我就只会写html和一点点的vue.js，遇到css就只能抓瞎了，纯粹的面向网页编程，文章写的不是很好，涉及的点，有点多，却不想放弃任何一点，所以看起来，有点杂乱。好咯，就这样咯，快来动动你的小手指，给你家小孩搞一个练习题吧。