Utilice Vue para hacer una comparación sencilla del tamaño de dos números.

1. Puntos de conocimiento de evaluación
: cree instancias de vue y use las instrucciones integradas del modelo
v. 2. Objetivos de la práctica:
cree instancias de vue
y domine el uso de las instrucciones integradas del modelo v.
3.
En el estado inicial del análisis de la demanda, no se puede hacer clic en el botón "Comparar". Si ingresa un número, no se puede hacer clic en el botón. Después de ingresar dos números, se puede hacer clic en el botón; haga clic en el botón "Comparar" a continuación para mostrar los resultados de la comparación. La fuente en el lado más grande se hace más grande y la fuente en el lado más pequeño se vuelve más pequeña. Si son iguales, la fuente tendrá el mismo tamaño: 4. Análisis de
caso

Comparemos dos números:

1. En el estado inicial, no se puede hacer clic en el botón "Comparar" y la interfaz es la siguiente:

2. Después de ingresar un número, aún no se puede hacer clic en el botón. Después de ingresar dos números, se puede hacer clic en el botón:

3. Haga clic en el botón "Comparar" a continuación para mostrar los resultados de la comparación. La fuente en el lado más grande se hará más grande y la fuente en el lado más pequeño se hará más pequeña. Si son iguales, las fuentes tendrán el mismo tamaño:

El código se muestra a continuación:

<!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/[email protected]/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>

Utilice Vue para hacer una comparación sencilla del tamaño de dos números.

Supongo que te gusta