Vue 時間過濾器

阿新 • • 發佈：2019-01-30

Vue裡的時間過濾器：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div>
 {{ message | formatTime('YMD')}}
</div>
<div 
>
{{ message | formatTime('YMDHMS')}}
</div>
   <div>
    {{ message | formatTime('HMS')}}
   </div>
    <div>
    {{ message | formatTime('YM')}}
   </div>
    </div>

元素的補零計算：

<script>
//元素的補零計算
function addZero(val){
 if(val < 10){
  return "0" +val;
 }else 
{
  return val;
 }
};


console.log(addZero(9))


//實現vue中的過濾器功能  先定義過濾器 在使用        value是過濾器前面的值，type是過濾器中定義的欄位
Vue.filter("formatTime",function(value,type){
var dataTime="";
var data = new Date();  
             data.setTime(value); 
     var year   =  data.getFullYear();  
             var month  = 
  addZero(data.getMonth() + 1);  
             var day    =  addZero(data.getDate()); 
             var hour   =  addZero(data.getHours());
var minute =  addZero(data.getMinutes());
var second =  addZero(data.getSeconds());
if(type == "YMD"){
dataTime =  year + "-"+ month + "-" + day;
}else if(type == "YMDHMS"){
dataTime = year + "-"+month + "-" + day + " " +hour+ ":"+minute+":" +second;
}else if(type == "HMS"){
dataTime = hour+":" + minute+":" + second;
}else if(type == "YM"){
dataTime = year + "-" + month;

}
return dataTime;//將格式化後的字串輸出到前端顯示
});


var app = new Vue({
 el: '#app',
 data: {
   message: '1501068985877'
 }
         });
</script>

vue時間過濾器簡單實例

nbsp 單實例 new bsp class h+ ets 直接 filters 利用vue的過濾器進行簡單的時間過濾直接上效果圖=> 附上代碼=> <template> <div class="he

Vue 時間過濾器

Vue裡的時間過濾器： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl

Vue建立時間過濾器 | filterTime('-')

- HTML 使用Vue.filter()方法建立全域性過濾器。需求：時間2018-09-26T03:24:30.489Z 變為 2018-09-26   <div>

vue中格式化時間過濾器

直接上程式碼： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><scrip

VUE過濾器的使用 vue 時間格式化

過濾器介紹過濾器常被用於一些文字格式化我們可以自定義過濾器，可以實現各種各樣的功能。 vue時間格式化建立Date.js var dateFormat = {

vue.js時間過濾器

首先，資料庫中往往儲存的是時間的毫秒形式，這樣在頁面上可以操控顯示時間的格式。 1. 頁面中: <div class="time">{{rating.rateTime | formatDate}}</div>

vue 的過濾器

api enc urn 1.0 版本 capital lower ice 定義 1.0版本：　　limitBy 　　filteBy 　　orderBy 　　lowerBy 　　upperBy 　　json 　　currency 　　capitalize 　　plurali

Action執行時間過濾器

cti time attribute none tpc .info info 一個單個 public class AccessStatisticsAttribute : ActionFilterAttribute { /// <summar

vue 時間選擇器組件

emp str else template route spl efault emit child vue 時間選擇器組件組件效果：單文件組件： <template> <div class="date-pickers"> &

vue.js-過濾器 filters使用詳細示例

sta orm == refresh rri using 詳細 length ram 什麽也不說了，直接上幹貨： 1.首先，獲取後臺數據到頁面，並調用過濾器在<script>中添加 onRefreshItems (currentPage, perPage

Vue 2.0的學習筆記：Vue的過濾器

保持 computed title 添加處理顏色一個神奇 bubuko 轉自： https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html 過濾器的介紹 1、在Vue中使用過濾器（Filters）

vue的過濾器filter

for gui nbsp lte con 就是方法 clam 寫法前記：　　　排版記錄，點耽誤時間，我就簡單的來，下面是一個vue 過濾器的寫法，demo 演示，限制一個字符串的長度。 vue filter 的官網介紹 https://cn.vuejs.org/v2/

Vue.js過濾器

過濾器的作用在不改變資料的情況下，輸出前端需要的格式資料過濾器的定義方法 Vue.filter(‘方法名’,function(val){}); 過濾器的呼叫方法 {{ msg|方法名}} 注意事項定義過濾器，必須放在Vue例項化前面在沒有衝突的前提下，過濾器

vue 使用過濾器資料值和顯示值不同原因

vue 檢測input輸入框值發生改變的事件中不會觸發資料更新； vue 檢測input輸入框值發生改變的事件中不會觸發資料更新； vue 檢測input輸入框值發生改變的事件中不會觸發資料更新；重要的事情說三次；不會觸發資料更新的

vue 新增過濾器-以格式化日期為例

vue的filter和angular的pipe管道類似，是過濾器官網：https://cn.vuejs.org/v2/guide/filters.html 新增格式化日期的全域性過濾器在main.js中 import moment from 'moment' // 定義全域性過濾器--時

2018年11月09日關於Vue的過濾器 and 自定義指令—基礎配置 and 配置傳參及修飾符

1、過濾器 //在html下的程式碼 <div id="app"> <div> <input type="text" v-model="len" />mm {{len | meter}} </div

VUE：過濾器及日期格式化moment庫

VUE：過濾器及日期格式化moment庫 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>11_過濾器</title

vue的過濾器語發及應用案例

str tid slice 價格取代四舍五入 tof ssa value 1.使用地方：雙花括號插值處或組件屬性處例： {{ message | capitalize }} <div v-bind:id="rawId | formatId">&

vue時間元件精確到時分秒---datetime

由於專案的需求,時間需精確到時分秒. 環境:資料庫5.5 後端技術:springboot+maven+shiro+swagger+mybatis+redis+quartz+thyemeleaf 前端技術:vue 資料庫:mysql 前臺type="datetime" ,後臺接收為

Vue的過濾器,生命週期的鉤子函式和使用Vue-router

一.過濾器　　 1.區域性過濾器在當前元件內部使用過濾器　　給某些資料添油加醋 //宣告 filters:{ '過濾器的名字':function(val,a,b){ //a 就是alax ，val就是當前的資料 } } //使用管道符資料 | 過濾器的名

Vue 時間過濾器

Vue裡的 時間過濾器：

元素的補零計算：

相關推薦

Vue裡的時間過濾器：