Vue.js组件开发案例（比较两个数字大小）

见过不少人、经过不少事、也吃过不少苦，感悟世事无常、人心多变，靠着回忆将往事串珠成链，聊聊感情、谈谈发展，我慢慢写、你一点一点看......

实现一个比较2个数字大小的组件，当输入2个数字后，单击“比较”按钮后自动输出比较结果。

<template>

  <div id="app">

    <label for="num1">第1个数字：</label>

    <input type="number" v-model.number="num1" id="num1" required />

    <br /><br />

    <label for="num2">第2个数字：</label>

    <input type="number" v-model.number="num2" id="num2" required />

    <br /><br />

    <button @click="compareNumbers">比较</button>

    <p v-if="result !== null">比较结果：{ { result }}</p>

  </div>

</template>

<script>

export default {

  data() {

    return {

      num1: 0,

      num2: 0,

      result: 0,

    };

  },

  methods: {

    compareNumbers() {

      if (this.num1 === this.num2) {

        this.result = "两个数字相等";

      } else if (this.num1 > this.num2) {

        this.result = "第一个数字更大";

      } else if (this.num1 < this.num2){

        this.result = "第二个数字更大";

      }else{

        this.result = "比较失败";

      }

    },

  },

};

</script>

关注我，不失联。有啥问题请留言。

感情恋爱合集https://blog.csdn.net/forever8341/category_12863789.html

职业发展故事https://blog.csdn.net/forever8341/category_12863790.html

常用代码片段https://blog.csdn.net/forever8341/category_12863793.html

程序开发教程https://blog.csdn.net/forever8341/category_12863792.html

自我备考经验 https://blog.csdn.net/forever8341/category_12863791.html

高阶高效代码https://blog.csdn.net/forever8341/category_12873345.html

金融语言解析https://blog.csdn.net/forever8341/category_12877262.html