Let's say I have a current date filtered to February 22nd 2019
. I want the nd
sign to be inside the <sup class="small"></sup>
tag. The problem is, I'm using Vue and Moment.js at the same time.
In PHP, I could just do:
{!! Carbon\Carbon::today()->format('F d<\s\up \c\l\a\s\s\="\s\m\a\l\l\"\>S</\s\up> Y') !!}
but how can I do that in Javascript and Vue? Or maybe there is cleaner way to do so? Please take a look at my script..
<template>
<div class="container">
<!-- Textbox -->
<div class="textbox text-white">
<p>Realtime Flight Schedule</p>
<div class="live-datetime">
<h1>{{ currentDate | filterCurrentDate }}</h1>
<digi-clock></digi-clock>
</div>
</div>
<!-- Flight table -->
<flight-table></flight-table>
</div>
</template>
<script>
import moment from 'moment'
export default {
filters: {
filterCurrentDate(date) {
return moment(date).format("MMMMM Do Y")
}
},
data() {
return {
currentDate: new Date(),
}
},
}
</script>
I believe you have to use v-html
for that. So you'd have filterCurrentDate
generate the HTML from the Moment text, and then use v-html
to render that as-is.
<h1 v-html="filterCurrentDateHTML(currentDate)"></h1>
Note I changed the name of the filter to make it explicit that it returns HTML.
For filterCurrentDateHTML
, perhaps:
const m = moment(date);
const ord = m.format("Do");
return `${m.format("MMMMM")} ${ord.replace(/\D/g, '')}<sup class="small">${ord.replace(/\d/g, '')}</sup> ${m.format('Y')}`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.