vue input 限制输入经度

在Vue.js中，我们可以利用v-model指令结合自定义事件或者正则表达式来限制input元素中输入的经度。经度通常范围是从-180到180之间，有时还会加上精度，比如保留到小数点后几位。

下面是一个简单的示例：

<template>
  <div>
    <input type="number" v-model.number="longitude"
           :max="180" :min="-180"
           @input="validateLongitude"
           placeholder="请输入经度">
    <span v-if="isInvalidLatitude">{{ errorMessage }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      longitude: null,
      errorMessage: '',
    };
  },
  methods: {
    validateLongitude(e) {
      const value = Number(this.longitude);
      if (isNaN(value)) {
        this.errorMessage = '请输入有效数字';
      } else if (!(-180 <= value && value <= 180)) {
        this.errorMessage = '经度应在-180到180范围内';
      } else {
        this.errorMessage = '';
      }
    },
  },
};
</script>

在这个例子中，`v-model.number`用于确保输入的是数字类型，`:max`和`:min`分别设置了最大值和最小值。当用户输入不符合要求时，我们会通过`@input`事件触发`validateLongitude`方法，并显示错误消息。