在Vue的模板插值{{ }}内直接快速转化时间戳

缘由

在Vue 的模板插值{{ }}内直接快速转化时间戳？咋会有这种奇奇怪怪的想法？那一定是想偷懒导致的
例如请求一个文章数据，后台返回过来的是时间戳格式，就需要用js先对过来的数组循环操作；直到遇到“昊森”的操作，瞬间感觉 卧槽 好家伙还可以这样写

// 示例：完整时间{{ new Date(userinfo.join_time * 1000).toLocaleString()}}
// 示例：单独保留时间{{ new Date(userinfo.join_time * 1000).toLocaleString().split(' ')[0] }}

实践uni-app项目

<template>
  <view class="content">
    <view class="list" v-for="(item, index) in dome" :key="index">
      <view class="title"> {{ item.title }}</view>
      <view class="flexs">
        <view class="desrc"> {{ item.tag }}</view>
        <view class="desrc" style="color: red;"> {{ new Date(item.time * 1000).toLocaleString().split(' ')[0] }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      dome: [{
        "title": "精彩的冒险之旅",
        "covery": "https://example.com/adventure.jpg",
        "tag": "冒险",
        "time": 1609459200
      }, {
        "title": "美食的奇幻世界",
        "covery": "https://example.com/food.jpg",
        "tag": "美食",
        "time": 1622505600
      }, {"title": "科技前沿的探索", "covery": "https://example.com/technology.jpg", "tag": "科技", "time": 1635652000}]
    }
  },
}
</script>
<style>
page {
  background-color: #f8f8f8;
}

.content {
  margin: 30 rpx;
}

.list {
  border-radius: 20 rpx;
  padding: 30 rpx;
  background-color: #ffffff;
  margin-bottom: 20 rpx;
}

.flexs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28 rpx;
}

.title {
  font-size: 40 rpx;
  font-weight: bold;
  margin-bottom: 20 rpx;
}
</style>