2024年前端最全基于elementUI的一个使用v-model实现的经纬度输入的vue组件(1)，字节跳动前端三面凉凉

本文链接：https://blog.csdn.net/2401_84616444/article/details/138773425

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

一个span显示东经西经，三个输入框输入度分秒

<template>
  <div class="coordinates">
    <!-- 经度 -->
    <div class="item">
      <span class="itude"
            @click="itudeChange(true)">{
   { longFlag | longitudeName }}</span>
      <el-input v-model="longitude[0]"
                @change="change(true,0)"
                size="mini">
        <i slot="suffix">°</i>
      </el-input>
      <el-input v-modelumber="longitude[1]"
                @change="change(true,1)"
                size="mini">
        <i slot="suffix">′</i>
      </el-input>
      <el-input v-model="longitude[2]"
                @change="change(true,2)"
                size="mini">
        <i slot="suffix">″</i>
      </el-input>
    </div>
    <!-- 纬度 -->
    <div class="item">
      <span class="itude"
            @click="itudeChange(false)">{
   { latFlag | latitudeName }}</span>
      <el-input v-model="latitude[0]"
                @change="change(false,0)"
                size="mini">
        <i slot="suffix">°</i>
      </el-input>
      <el-input v-model="latitude[1]"
                @change="change(false,1)"
                size="mini">
        <i slot="suffix">′</i>
      </el-input>
      <el-input v-model="latitude[2]"
                @change="change(false,2)"
                size="mini">
        <i slot="suffix">″</i>
      </el-input>
    </div>
  </div>
</template>
复制代码