Detailed explanation of Vue filters
|
<body>
<div id="root">
<h2>Display formatted time</h2>
<!-- Computed property implementation -->
<h2>It is {{fmtTime}}</h2>
<!-- Methods implementation -->
<h2>Now is {{getFmtTime()}}</h2>
<!-- Filter time implementation-->
<h2>It is {{time | timeFormater}}</h2>
</div>
<div id="root2">
<h2>Now: {{msg |mySlice }}</h2>
</div>
<script>
Vue.config.productionTip = false;
//Global filter Vue.filter('mySlice', function(value) {
return value.slice(0, 4)
})
new Vue({
el: "#root",
data: {
time: 1637047951556 //timestamp},
computed: {
fmtTime() {
return dayjs(this.time).format('YYYY year MM month DD HH:mm:ss')
}
},
methods: {
getFmtTime() {
return dayjs(this.time).format('YYYY year MM month DD HH:mm:ss')
}
},
filters:
timeFormater(value) {
return dayjs(value).format('YYYY year MM month DD HH: mm: ss ')
}
},
})
new Vue({
el: "#root2",
data: {
msg: 'hello world'
}
})
</script>
</body>
SummarizeThis article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: Solution to prevent caching in pages
>>: How to Completely Clean Your Docker Data
Recommend
Ubuntu 18.04 obtains root permissions and logs in as root user
Written in advance: In the following steps, you n...
Steps to set up and mount shared folders on Windows host and Docker container
Programs in Docker containers often need to acces...
Nodejs implements intranet penetration service
Table of contents 1. Proxy in LAN 2. Intranet pen...
Installation of mysql5.7 and implementation process of long-term free use of Navicate
(I) Installation of mysql5.7: ❀ Details: The inst...
【Web Design】Share E-WebTemplates exquisite foreign web page templates (FLASH+PSD source file+HTML)
They are all web page templates from the foreign ...
NestJs uses Mongoose to operate MongoDB
I recently started learning the NestJs framework....
Detailed explanation of Linux rpm and yum commands and usage
RPM package management A packaging and installati...
A brief understanding of the relevant locks in MySQL
This article is mainly to take you to quickly und...
How does Zabbix monitor and obtain network device data through ssh?
Scenario simulation: The operation and maintenanc...
Summary of three ways to create new elements
First: via text/HTML var txt1="<h1>Tex...
VirtualBox CentOS7.7.1908 Python3.8 build Scrapy development environment [graphic tutorial]
Table of contents environment Install CentOS Conf...
How to install mongodb 4.2 using yum on centos8
1. Make a repo file Refer to the official install...
CSS flex several multi-column layout
Basic three-column layout .container{ display: fl...
Example of implementing dynamic verification code on a page using JavaScript
introduction: Nowadays, many dynamic verification...
An article to deal with Mysql date and time functions
Table of contents Preface 1. Get the current time...