如何像在 Vue 中一样在 Alpine.JS 中添加显示过滤器？

Question

如何在 Alpine.js 中以人类可读的格式显示日期时间？我会在 Vuejs 中添加一个过滤器来执行相同的操作，并在 Alpine.js.

中寻找类似的解决方案

<!DOCTYPE html>
<html>

<head>
    <title>Data time display in AlpineJS</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"
        integrity="sha512-nIwdJlD5/vHj23CbO2iHCXtsqzdTTx3e3uAmpTm4x2Y8xCIFyWu4cSIV8GaGe2UNVq86/1h9EgUZy7tn243qdA=="
        crossorigin="anonymous" defer></script>
</head>

<body>
    <div x-data="mdata()">
        <h3 x-text="name"></h3>
        <h3 x-text="created_on"></h3>
    </div>
    <script>
        const mdata = () => {
            return {
                name: "Carpet",
                created_on: Date.now(),
            };
        };
    </script>
</body>

</html>

Answer 1

在研究 Alpine.js Github 存储库的问题后，了解到可以在 x-text 指令中调用一个函数作为 Alpine.js可以访问在全局范围和组件范围中定义的任何函数。

有关详细信息，请参阅 here and here

声明了以下函数：

var date_format = function (value) {
    if (value) {
        return dayjs(value).format('YYYY-MM-DD hh:mm:ss');
    }
    else {
        return value;
    }
}

并在 x-text 中这样引用它：

<div x-data="mdata()">
    <h3 x-text="name"></h3>
    <h3 x-text="date_format(created_on)"></h3>
</div>

<!DOCTYPE html>
<html>

<head>
    <title>Data time display in AlpineJS</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"
        integrity="sha512-nIwdJlD5/vHj23CbO2iHCXtsqzdTTx3e3uAmpTm4x2Y8xCIFyWu4cSIV8GaGe2UNVq86/1h9EgUZy7tn243qdA=="
        crossorigin="anonymous" defer></script>
    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
</head>

<body>
    <div x-data="mdata()">
        <h3 x-text="name"></h3>
        <h3 x-text="date_format(created_on)"></h3>
    </div>
    <script>
        const mdata = () => {
            return {
                name: "Carpet",
                created_on: Date.now(),
            };
        };
        var date_format = function (value) {
            if (value) {
                return dayjs(value).format('YYYY-MM-DD hh:mm:ss');
            }
            else {
                return value;
            }
        }
    </script>
</body>

</html>

如何像在 Vue 中一样在 Alpine.JS 中添加显示过滤器？

How to add a display filter in Alpine.JS like in Vue?

javascript

datetime

alpine.js