Vue.js应用中实现像素宽高比计算与禁用文本框展示求助

我来帮你搞定这个宽高比计算的功能，咱们一步步来实现：

1. 先完善HTML结构（绑定Vue指令） #

先把你的表单部分修改一下，给宽高输入框加上双向绑定，给显示比例的禁用输入框绑定计算结果：

<?php ob_start(); session_start(); include('head.php'); include('header.php'); ?>
<div id="signUpFormContainer">
  <div id="signUpForm">
    <h2>Add A Display</h2>
    <!-- 宽度输入框 -->
    <div class="form-item">
      <label>宽度 (px):</label>
      <input type="number" v-model.number="width" placeholder="请输入宽度" min="1">
    </div>
    <!-- 高度输入框 -->
    <div class="form-item">
      <label>高度 (px):</label>
      <input type="number" v-model.number="height" placeholder="请输入高度" min="1">
    </div>
    <!-- 宽高比显示框（禁用状态） -->
    <div class="form-item">
      <label>宽高比:</label>
      <input type="text" :value="aspectRatio" disabled>
    </div>
  </div>
</div>

2. 编写Vue核心逻辑 #

在页面的<script>标签里（或者你的Vue组件文件中），实现计算宽高比的核心代码：

new Vue({
  el: '#signUpFormContainer',
  data() {
    return {
      width: null,  // 存储输入的宽度数值
      height: null  // 存储输入的高度数值
    }
  },
  computed: {
    // 实时计算并返回最简宽高比
    aspectRatio() {
      // 先判断宽高是否为有效正数
      if (!this.width || !this.height || this.width <= 0 || this.height <= 0) {
        return ''; // 无效值时显示空内容
      }
      // 计算宽高的最大公约数，用来简化比例
      const commonDivisor = this.getGreatestCommonDivisor(this.width, this.height);
      // 生成最简比例字符串
      return `${this.width / commonDivisor}:${this.height / commonDivisor}`;
    }
  },
  methods: {
    // 用欧几里得算法求最大公约数
    getGreatestCommonDivisor(a, b) {
      while (b !== 0) {
        let temp = b;
        b = a % b;
        a = temp;
      }
      return a;
    }
  }
})

3. 逻辑说明 #

• 双向绑定：用v-model.number确保输入的是数字类型，避免字符串计算出错；加上min="1"防止输入非正数。
• 计算属性：aspectRatio会实时监听宽高的变化，只要两个值有效，就自动计算最简比例。
• 最大公约数算法：欧几里得算法能高效求出两个数的最大公约数，保证比例是最简形式（比如1920x1080会自动简化为16:9）。

小优化建议 #

如果想让体验更友好，可以给输入框添加非空提示，或者在宽高未输入时显示提示文字，比如把aspectRatio的默认返回值改成"请输入有效宽高"。

内容的提问来源于stack exchange，提问作者user8953355