如何使用Vue做個簡單的比較兩個數字大小頁面

更新時間：2023年10月09日 08:27:13 作者：每天都要做的更好

這篇文章主要給大家介紹了關于如何使用Vue做個簡單的比較兩個數字大小頁面的相關資料,實現一個比較兩個數字大小的頁面，練習Vue實例的創(chuàng)建、數據綁定和事件監(jiān)聽方法,需要的朋友可以參考下

1、考核知識點

創(chuàng)建vue實例和對v-model內置指令的使用

2、練習目標

創(chuàng)建vue實例掌握v-model內置指令的使用。

3、需求分析

初始狀態(tài)下，“比較”按鈕不可點擊，輸入一個數字，按鈕仍然不可點擊，當兩個數字輸入完后，按鈕變?yōu)榭牲c擊狀態(tài)；點擊下方“比較”按鈕，顯示比較結果，大的那一邊字體變大，小的那邊字體變小，相等的話字體一樣大：

4、案例分析

我們用兩個數字來比較：

1.初始狀態(tài)下，“比較”按鈕不可點擊，界面如下：

2.輸入一個數字，按鈕仍然不可點擊，當兩個數字輸入完后，按鈕變?yōu)榭牲c擊狀態(tài)：

3.點擊下方“比較”按鈕，顯示比較結果，大的那一邊字體變大，小的那邊字體變小，相等的話字體一樣大：

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input demo</title>
    <style>
        .compare-val {
            color: red;
        }
        .large {
            font-size: 16px;
        }
        .default {
            font-size: 14px;
        }
        .small {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="root">
    <div>
        <label>
            <span>請輸入第一個數: </span>
            <input v-model.number="input1" @focus="handleFocus"/>
        </label>
    </div>
    <div>
        <label>
            <span>請輸入第二個數: </span>
            <input v-model.number="input2" @focus="handleFocus"/>
        </label>
    </div>
    <button @click="compareClick()" :disabled="input1.length === 0 || input2.length === 0">比較</button>
    <div class="compare-val">
        <span>比較的結果: </span>
        <span v-show="input1 && input2 && txt">
            <span :class="num1Size">第一個數</span><span>{{ txt }}</span><span :class="num2Size">第二個數</span>
        </span>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
	new Vue({
		el: "#root",
		data() {
			return {
				input1: "",
				input2: "",
				txt: "", // 大于，小于，等于
				num1Size: "default", // default small large
				num2Size: "default"
			}
		},
		methods: {
			// 比較input1和input2值
			compareClick() {
				if (this.input1 > this.input2) {
					this.txt = '大于'
					this.num1Size = "large"
					this.num2Size = "small"
				} else if (this.input1 < this.input2) {
					this.txt = '小于'
					this.num1Size = "small"
					this.num2Size = "large"
				} else {
					this.txt = '等于'
					this.num1Size = "default"
					this.num2Size = "default"
				}
			},
			// 當input1或者input2獲取焦點就清空txt
			handleFocus() {
				this.txt = ''
			}
		}
	})
</script>
</body>
</html>