软件: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