Vue学习—— Element时间选择器、BaiduMap地图添加轨迹、JSON格式

目录

Vue 获取日期选择器中的时间

Vue地图添加轨迹

Vue 去除括号 & JSON格式

JSON.parse()

JSON.stringify()

---

Vue 获取日期选择器中的时间

日期选择器效果，官网 Element - The world's most popular Vue UI framework

默认获取参数格式，更改后获取后参数格式

代码

<template>
 <el-date-picker
        v-model="timevalue"
        type="date"
        :picker-options="pickerOptions"
        @click.native="clickoption"
        placeholder="选择日期">
      </el-date-picker>
</template>

<script>
export default {
  data(){
    return {
      //渲染页面初始化-日期
      timevalue: '',
      pickerOptions: {
        disabledDate(time) {
        return time.getTime() > Date.now();
        },
      },
curDate:'',  // 初始化获取日期
};
  },
  methods: {
    //点击操作，获取选择日期年月日，默认格式是英文
clickTrack(){
      console.log("timevalue----------",this.timevalue);//打印logo
      let Y = this.timevalue.getFullYear();
      let M = this.timevalue.getMonth()+1;//组件获取月份缺 1，需要手动加1
      let D = this.timevalue.getDate();
      this.curDate = Y+"-"+M+"-"+D;
      console.log("curDate----------",this.curDate);//打印logo
},
}，

</script>

知识点

v-model="timevalue"				模块名字可以自行更改，保持统一就好
type="date"						模块类型，有固定内容，更换datetime查看效果
:picker-options="pickerOptions"模块操作，获取日期
@click.native="clickoption"		模块点击触发函数，函数内容自定义
placeholder="选择日期">

Vue地图添加轨迹

官方案例：Vue Baidu Map

知识点介绍：

:path="polylinePath"	定义轨迹折线的名字，可以更换，后面添加数据到改项
stroke-color="blue"   	轨迹折线颜色，可更改为red，black……
:stroke-opacity="0.5" 	轨迹折线透明度，1就是不透明
:stroke-weight="2" 	轨迹折线粗细
:editing="true" 		轨迹折线是否可以编辑，添加折点，移动点的位置

Vue 去除括号 & JSON格式

使用replace替换，去除括号，如需去除其他东西，需要符合JSON格式

JSON.string() ,JSON.parse()可以尝试

            track = track.replace("[",""); //用替换，去除括号
            track = track.replace("]","");

            track = JSON.stringify(track);
            track = JSON.parse(track);

JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。