vue调用Moment显示时间

1.下载

Moment

网站: http://momentjs.cn/

2创建一个vue的文本格式    admin.vue

3.定义给值

 

 

代码如下

 

<template>

<div style="backgroundColor: black;">

 

<div>

<div style="width: 40%; float: left">

<el-card class="box-card" style="margin: 50px; backgroundColor: black; color: PaleTurquoise;">

<div slot="header" class="clearfix">

<span style="font-size: 36px; color: PowderBlue; ">珠海猪场数据展视&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ now | dateformat('YYYY-MM-DD HH:mm:ss') }}</span></span>

<el-button style="float: right; padding: 3px 0" type="text"></el-button>

</div>

<div style="font-size: 26px; color: LightGoldenrodYellow;">

<p>今日已入场&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;1000</span></p>

<p>已交易单次&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;600</span></p>

<p>已交易数量&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;500</span></p>

<p>生产效率比&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;50%</span></p>

<p>分&nbsp;切&nbsp;进&nbsp;度&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;30%</span></p>

<p>屠&nbsp;宰&nbsp;进&nbsp;度&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;50%</span></p>

<p>已&nbsp;交&nbsp;易&nbsp;额&nbsp;&nbsp;:<span id="">&nbsp;&nbsp;&nbsp;60%</span></p>

<p>冷&nbsp;&nbsp;&nbsp;链&nbsp;&nbsp;&nbsp;车&nbsp;&nbsp;:<span class=1000>&nbsp;&nbsp;&nbsp;1000辆</span></p>

<p>已&nbsp;&nbsp;&nbsp;激&nbsp;&nbsp;&nbsp;费&nbsp;&nbsp;:<span></span>&nbsp;&nbsp;&nbsp;10000元</p>

</div>

</el-card>

</div>

<div style="widht:60%; float: right;">

<div>

<x-chart :id="test2" :option="option2" class="aa"></x-chart>

<x-chart :id="test6" :option="option6" class="bb"></x-chart>

</div>

<div style="clear: both"></div>

 

<div style="margin-top:80px;">

<!-- <x-chart :id="test3" :option="option3" class="cc"></x-chart> -->

<x-chart :id="test4" :option="option4" class="dd"></x-chart>

<x-chart :id="test1" ref="option1" :option="option1" class="ee"></x-chart>

</div>

<div style="clear: both;"></div>

</div>

</div>

<div style="clear: both;"></div>

<div style="margin-top:90px;">

<x-chart :id="test5" :option="option5" class="ff"></x-chart>

</div>

</div>

</template>

<script>

// 导入chart组件

import XChart from './chart.vue'

// 导入chart组件模拟数据

import { option1, option2, option3, option4, option5, option6 } from '@/chart-options/options'

import moment from 'moment'

export default {

name: 'app',

data() {

return {

test1: 'test1',

test2: 'test2',

test3: 'test3',

test4: 'test4',

test5: 'test5',

test6: 'test6',

option1: option1.bar,

option2: option2.bar,

option3: option3,

option4: option4,

option5: option5,

option6: option6,

now: moment()

}

},

components: {

XChart

},

filters: {

dateformat(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {

return moment(dataStr).format(pattern)

}

},

created() {

this.option1.series[0].data[0]

console.log(this.$refs.option1)

},

mounted() {

setInterval(() => {

this.now = moment()

}, 1000)

},

methods: {

}

}

</script>

 

<style>

.aa, .bb, .dd, .ee {

width: 500px;

height: 300px;

float: right;

margin-left: 90px;

}

</style>