Vue框架Element UI教程-时间选择器(二)

Element UI手册:https://cloud.tencent.com/developer/doc/1270
中文文档:http://element-cn.eleme.io/#/zh-CN
github地址:https://github.com/ElemeFE/element


前一篇已经安装好了Element UI环境,现在开始来实际操作框架提供的一些组件的运用了。

在准备好以下文章里面的内容之后,可以打开test.vue文件,开始写代码了。Vue框架Element UI教程-安装环境搭建(一)https://www.jianshu.com/p/ab3c34a95128

打开test.vue文件,开始写代码

<template>
  <div>
  <el-time-picker
    is-range
    v-model="value"
    range-separator="-"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      
      };
    }
  }
</script>

npm run dev 运行,浏览器显示如下,实现了一个简单的时间选择器


原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,对于博客上面有不会的问题,欢迎加入编程微刊qq群:260352626。

推荐阅读更多精彩内容