练习—Vue计算器加比大小综合练习

软件：VScode

内容：1、比较数字大小

2、编写简易计算机

说明：这次的实验其实在学习Web基础的时候也可以练出来，可以看得出大部分代码都很熟悉（即使你Web基础学的不好），主要差距就在于如何综合到一起共同编成一个实例。讲道理我写这个实验的时候是把两块内容分开了，下面这个代码是借鉴讲课的同学的加以修改（写的真的很好我respect）。例子虽然看着简单其实还是有点坑的，下面跟大家讲一下这个练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        输入第一个数a:
        <input type="number" v-model="a">{
   
   {a}}
        <br> 输入第二个数b:
        <input type="number" v-model="b">{
   
   {b}}
        <br>
        <button @click="compare(a,b)">比大小</button>
        <button @click="add(a,b)">加法</button>
        <button @click="sub(a,b)">减法</button>
        <button @click="mul(a,b)">乘法</button>
        <button @click="del(a,b)">除法</button>
        <br>result:
        <p>{
   
   {result}}</p>
        <p>{
   
   {result1}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                a: 0,
                b: 0,
                result: 0,
                result1: ''
            },
            methods: {
                compare: function(num1, num2) {
                    if (Number(num1) > Number(num2))
                        return this.result1 = "a>b"
                    else if (Number(num1) < Number(num2))
                        return this.result1 = "a<b"
                    else
                        return this.result1 = "a=b"
                },
                add: function(num1, num2) {
                    return this.result = parseInt(num1) + parseInt(num2)
                },
                sub: function(num1, num2) {
                    return this.result = num1 - num2
                },
                mul: function(num1, num2) {
                    return this.result = num1 * num2
                },
                del: function(num1, num2) {
                    return this.result = num1 / num2
                }
            }
        })
    </script>
</body>

</html>

首先我想说的第一个点是

add: function(num1, num2) {
                    return this.result = parseInt(num1) + parseInt(num2)
                },

为什么单独拿出来这个，可以预见大部分人敲的时候，可能想不到要加parseInt。这类例子不常练习的可能就忘了ParseInt是个啥，具体用法你百度我就不详细说来。不加parseInt的后果就是运行时加法运行不出来，为啥呢，这就要牵扯到加法的特殊性了，“+”这个符号不仅仅代表把数相加，等我有空再细说

第二个点：

 compare: function(num1, num2) {
                    if (Number(num1) > Number(num2))
                        return this.result1 = "a>b"
                    else if (Number(num1) < Number(num2))
                        return this.result1 = "a<b"

自己先琢磨吧等我有空专门弄一下Vue

练习—Vue计算器加比大小综合练习

Guess you like