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
Detailed explanation of client configuration for vue3+electron12+dll development
Table of contents Modify the repository source st...
Detailed explanation of VueRouter routing
Table of contents vue router 1. Understand the co...
Sample code for changing the color of a png image through a CSS3 filter
This method uses the drop-shadow filter in CSS3 t...
Mysql multi-condition query statement with And keyword
MySQL multi-condition query with AND keyword. In ...
Two box models in web pages (W3C box model, IE box model)
There are two types of web page box models: 1: Sta...
Vue3.0 uses the vue-grid-layout plug-in to implement drag layout
Table of contents 1. Plugins 2. Interlude 3. Impl...
Build nginx virtual host based on domain name, port and IP
There are three types of virtual hosts supported ...
Open the Windows server port (take port 8080 as an example)
What is a Port? The ports we usually refer to are...
Example code for css3 to achieve scroll bar beautification effect
The specific code is as follows: /*Scroll bar wid...
JavaScript to achieve magnifying glass effect
This article shares the specific code for JavaScr...
Getting Started Tutorial on Animating SVG Path Strokes Using CSS3
Without relying on JavaScript, pure CSS is used t...
IE6/7 is going to be a mess: empty text node height issue
Preface: Use debugbar to view document code in iet...
How to configure static network connection in Linux
Configuring network connectivity for Linux system...
Linux virtual memory settings tutorial and practice
What is Virtual Memory? First, I will directly qu...
WeChat applet realizes simple tab switching effect
This article shares the specific code for WeChat ...