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
![Quickly solve the problem of slow and stuck opening of input[type=file]](/upload/images/67cac0705c1e2.webp)
Recommend
Teach you how to enable the Linux subsystem of Win10 (with detailed pictures and text)
Today I will introduce how to enable the Linux su...
MySQL backup and recovery design ideas
background First, let me explain the background. ...
Differentiate between null value and empty character ('') in MySQL
In daily development, database addition, deletion...
A brief analysis of the difference between ref and toRef in Vue3
1. ref is copied, the view will be updated If you...
How to avoid data loop conflicts when MySQL is configured with dual masters
I wonder if you have ever thought about this ques...
Installation steps of docker-ce on Raspberry Pi 4b ubuntu19 server
The Raspberry Pi model is 4b, 1G RAM. The system ...
Steps for installing MySQL 8.0.16 on Windows and solutions to errors
1. Introduction: I think the changes after mysql8...
win10 mysql 5.6.35 winx64 free installation version configuration tutorial
mysql 5.6.35 winx64 free installation version con...
Linux Disk Quota Management Graphical Example
Disk quota is the storage limit of a specified di...
Teach you how to implement a circular/fan-shaped menu in 2 minutes (basic version)
Preface The project requires a circular menu. I s...
Docker installs redis 5.0.7 and mounts external configuration and data issues
Redis is an open source NoSQL database written in...
CSS realizes the layout method of fixed left and adaptive right
1. Floating layout 1. Let the fixed width div flo...
How to recover accidentally deleted messages files in Linux
If there are files that are being used by a proce...
Example of implementing dynamic verification code on a page using JavaScript
introduction: Nowadays, many dynamic verification...
How to quickly return to the top from the bottom when there is too much content on the web page
In web front-end development, it is inevitable to ...