前言:工作中用到 vue+element ui 的前端框架,需要選擇年月日時分,但element ui官網demo有沒有,所以記錄一下。轉載請注明出處:https://www.cnblogs.com/yuxiaole/p/9304510.html
網站地址:我的個人vue+element ui demo網站
github地址:yuleGH github
代碼如下
這里 hh:mm 指的是12小時制,HH:mm 指的是24小時制。
<html> <head> <title>測試</title> <!-- 引入樣式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-date-picker v-model="value1" type="datetime" format="yyyy-MM-dd hh:mm" value-format="yyyy-MM-dd hh:mm" placeholder="選擇日期時間"> </el-date-picker> <el-button type="primary" @click="clickBtn">打印選擇的時間</el-button> </div> <!-- 引入組件庫 --> <script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { value1: "" }, methods: { clickBtn: function () { console.log(this.value1); } } }); </script> </body> </html>
寫這個 demo 時遇到一個問題,頁面報錯(是 element ui index.js 報出的錯):
查了半天,才發現是 vue 和 element ui 的 js 引用順序寫反了。。。
所以,一定要先引用 vue.js,因為 element ui 畢竟是基於 vue 的。
轉載請注明出處:https://www.cnblogs.com/yuxiaole/p/9304510.html