如何在Element框架使用日期控制項並獲取年齡

2020-12-08 IT軟體專家

工具

HBuilderXNode.jsnpm瀏覽器技術

vueelementJavaScriptCSS3在element框架項目中，日期控制項是一種常用的，可以顯示日期、時間和日期時間。那麼，如何使用日期控制項設置用戶出生日期？然後根據出生日期算出年齡。下面利用實例說明：

操作步驟如下：

1、打開HBuilderX工具，創建vue項目，然後新建vue文件

創建vue項目，然後新建vue文件

2、打開vue文件，利用element布局，插入一個el-form表單

利用element布局，插入一個el-form表單

3、在script標籤中，data對象定義並初始化表單對象變量

data對象定義並初始化表單對象變量

4、在日期控制項el-date-picker，添加change事件，插入屬性format和value-format

日期控制項，插入change事件，添加屬性

5、接著，在methods中，定義change事件changeDate；獲取日期控制項和當前年份，然後進行減法計算，並賦值給年齡框

定義change事件，獲取年齡

6、在change事件下方，定義保存按鈕點擊事件，獲取表單的值

定義保存按鈕點擊事件，獲取表單的值

7、打開App.vue文件，導入組件Birth，然後在界面中引用

導入組件Birth，然後在界面中引用

8、保存代碼並使用命令運行項目，輸入內容並點擊保存按鈕

輸入內容並點擊保存按鈕

9、打開瀏覽器控制臺，查看列印結果

打開瀏覽器控制臺，查看列印結果

相關焦點

  • 如何使用Element-UI中輸入框轉換成文本域
    在使用Vue+Element-UI框架項目過程中，如果不仔細看Element官網，你會發現表單控制項中沒有文本域。但當你仔細閱讀el-input控制項時，你會發現輸入框和文本域是共用一個控制項，只不過文本域需要加屬性type="textarea"工具HBuilderX技術
  • 如何創建vue項目並使用element框架中的el-select
    預覽效果7、按Ctrl + C快捷鍵停止項目，執行命令npm i element-ui -S安裝ElementUI命令：npm i element-ui -Snpm i element-ui -S8、打開項目中的main.js文件，依次導入element-ui和對應的樣式文件，調用Vue.use(ElementUI)
  • 盤點界面編程中那些常用控制項,詳解PyQt5中標籤控制項QLabel的使用
    如何給控制項貼上標籤？QLabel類先來看下QLabel類的父類有哪些？我們之前有一篇文章提到了獲取類的多繼承順序的方法，我們使用了inspect模塊（參見Python獲取類的層次結構和繼承順序）。這裡，我們看下QLabel的繼承順序是怎樣的？
  • 基礎知識 | 飛機時控制項日期時間識別
    日常維護工作中，經常會接觸到一些時控制項，一般常見於各種應急設備，比如各種電池，救生筏、救生衣，滅火瓶，等等。碰到這些時控制項時，需要我們準確讀取部件上標識的時間。各個地區和國家表示時間的方法有差異，而航材的製造商分布全球，給我們的日期時間識讀帶來了困難，時不時會有人因看錯了日期時間而受處罰的。下面簡單介紹一下這方面的知識。
  • 深入學習SAP UI5框架代碼系列之二:UI5 控制項的渲染器
    (5) UI5控制項的實例數據實現細節 (6) UI5控制項數據綁定的實現原理 (7) UI5控制項數據綁定的三種模式：One Way，Two Way和OneTime實現原理比較 (8) UI5控制項ID的生成邏輯 (9) UI5
  • 製作自動增長的折線圖其實很簡單,使用offset函數與控制項即可搞定
    Hello，大家好，今天跟大家分享如何製作一個自動增長的折線圖，這個也是一個粉絲提問到的問題，下面就讓我們來看下他是如何操作的一、原理首先簡單跟大家說一下製作的原理，在這裡我們需要用到offset函數以及數值調節按鈕這個控制項，我們通過數值條件按鈕來控制offset函數的第四參數，達到一個動態獲取數據區域的效果，這樣的話我們就可以製作一個自動增長的折線圖Offset函數怎麼用，可以參考下之前的這一篇文章，與這一次的例子十分相似二、插入控制項點擊excel中的開發工具功能組
  • 如何使用uni-app中的日曆組件並獲取日期
    日曆組件添加ref和@confirm8、接著，在methods對象中，定義openCalendar方法，調用open()方法打開日曆；然後定義選定日期的事件confirmDate，定義打開日曆事件和日期確認事件9、點擊打開日曆按鈕，選擇一個日期，點擊確定
  • Excel表格使用OFFSET函數、控制項、定義名稱製作動態折線圖
    操作步驟：一.插入控制項並設置控制項格式：1.插入一個組合框（窗體控制項）和兩個數值調節鈕（窗體控制項）：切換到開發工具選項卡→插入→選擇對應的窗體控制項。2.按住Alt鍵調整控制項的大小，使控制項對齊單元格。3.設置控制項的格式：（1）滑鼠右鍵組合框→設置控制項格式→數據源區域選擇所有的水果品種→單元格連結選擇C11單元格→下拉顯示項數設置為7（水果種類共七種）。
  • 使用Qt框架實現基於QPainter類的自定義場景圖
    演示如何使用Qt框架實現基於 QPainter的自定義場景圖項。"繪製項"示例演示如何使用 QML 場景圖框架使用QPainter 實現自定義場景圖項。QQuickPaintedItem類是從QQuickItem 派生的類，用於使用 QPainter 接口實現自定義 QML 場景圖形項。
  • Element 仍在維護,官方發布適配 Vue 3.0 的 Element Plus
    地址：https://github.com/element-plus/element-plus據介紹，Element Plus 是首個使用 TypeScript + Vue 3.0 Composition API 重構的組件庫。
  • word控制項應用技巧:線上試卷製作小妙招
    然而，只上課卻不知道學生們對所學的知識掌握得如何了，怎麼辦？今天，小編教老師們快速製作出可應用於教學的互動試卷，快來看看吧！當了偉大靈魂工程師的髮小最近很頭禿，自從變成18線網紅女主播，天天在線上遠程給「小神獸們」進行靈魂提升。
  • Element - 餓了麼團隊出品的神級桌面 UI 組件庫
    設計師可以下載設計文件，在做設計圖時直接使用模板，既能快速出圖，也保證了前端還原實現。我是一個喜歡研究前端開發的愛好者，當我第一次看到element時，臥槽真漂亮！那個時候優秀的前端ui框架還不多，等我把官網所有的組件一一體驗下來，發現驚嘆得太早了，不僅好看，體驗做得非常到位，另我深有體會的是，原來在做產品設計時很難解決的交互問題，element都解決得非常好。高質量的UI組件為了用它，於是花了1周時間學了vue.js，之後就開始策馬奔騰了。
  • 如何在Element框架實現表格並聯動子表格
    技術vueElementJavaScriptCSS3在使用vue+Element結合的框架開發項目時，會經常使用到Element中的表格。如果想要實現父子表格的聯調（根據父表格的某個欄位查詢子表格），該如何實現呢？下面利用實例說明：1、打開HBuilderX工具，創建vue模板項目，然後安裝Element；接著，在項目指定文件夾下，新建vue文件ParentChild.vue
  • 官方Element Plus for Vue 3.0 Beta 版本今天發布了!
    降低耦合，簡化邏輯使用Vue 3.0 Teleport新特性重構掛載類組件使用Lerna維護和管理項目使用更輕量更通用的時間日期解決方案直接來到Element Plus官網，先進行安裝：npm install element-plus --save關於快速上手可參考官網，裡面對於全局配置、按需引入以及如何與新版的vue-cli
  • 如何在Element實現表格的增加、修改和刪除
    技術VueElementJavaScriptCSS3在使用Element框架時，可以使用el-table展示數據，還可以對表格記錄進行新增、修改和刪除。下面利用具體的實例說明：操作步驟如下：1、打開HBuilderX開發工具，創建vue+element框架項目，然後新建vue文件，輸入名稱Person.vue，點擊創建按鈕
  • 如何在vue項目中使用sass並設置元素樣式
    GitnpmHBuilder瀏覽器技術vueelementJavaScriptsassCSS3 在創建vue框架項目時，可以使用CSS3定義元素樣式；還可以使用sass動態變量定義元素樣式。
  • Vue 3下element-ui用不了怎麼辦,element-plus來幫你
    element-plus你可以理解為是element-ui支持Vue 3的版本，element-plus是一套支持Vue 3.0的組件庫，提供的組件涵蓋了絕大部分頁面UI的需求。在Vue 3的腳手架項目中，首先安裝element-plus的npm包，命令如下所示：npm install element-plus -S編輯main.js，引入整個element-plus組件和所需的樣式，由於element-plus組件內部默認使用英語，而我們項目需要使用中文
  • SpreadJS 表格控制項發布 V11 版本,新增圖表及前端 PDF 導出
    ，SpreadJS 純前端表格控制項正式發布V11 版本。SpreadJS是基於HTML5的JavaScript電子表格和網格功能控制項，適用於.NET、Java和移動端等各平臺在線編輯類Excel功能的表格程序開發。開發人員可利用SpreadJS，更好的顯示和管理類似 Excel 的數據，更方便的進行公式引擎、排序、過濾、輸入控制項、數據可視化、Excel導入/導出等操作。
  • 程式設計師:Java爬蟲使用Selenium+Autoit自動化爬取複雜頁面
    ;ControlClick ( "title", "窗口文本", 控制項ID , 按鈕 , 點擊次數 ) 向指定控制項發送滑鼠點擊命令;其中，title即AutoIt Window Info識別出的Title欄位，controlID即AutoIt Window Info識別;出的Class
  • 泛微e-cology9.0移動建模功能-列表、地圖、圖片、視頻等控制項功能...
    一、功能簡介移動建模，如下控制項功能優化：1、列表：支持多種數據來源方式獲取數據，支持未讀、反饋標識功能。2、拍照、附件：拍照控制項支持圖片自定義命名，拍照及附件控制項支持異步加載、優化表單數據提交速度。3、地圖：多種方式獲取中心點、自定義中心點圖標、支持顯示附加點及附加點連線功能。4、導航頭：增加配置右側菜單功能。5、圖片：支持多種來源獲取圖片數據。6、視頻：支持多種來源獲取視頻數據。