x-text 不适用于 Alpine JS 中的 <H4> 标签。为什么？

Question

我只想知道我的代码是否存在问题，或者只是一些 alpine js 功能存在问题。这是我的代码

<div class="d-flex flex-column ml-4" x-data={ data(); }>
    <span class="d-flex flex-column">
        <h4 class="font-weight-bold" x-text="price"></h4>
    </span>
</div>

和我的 JS 代码

<script type="text/javascript">
    function data()
    {
        return {
            price: 50
        }
    }

</script>

输出不打印任何内容。但是，如果我将行从

<h4 class="font-weight-bold" x-text="price"></h4>

到

<p class="font-weight-bold" x-text="price"></p>

然后它工作正常，我得到了文本 50 作为输出。为什么会这样？我做错了什么吗？

Answer 1

我相信你的 x-data 应该是 x-data="data()" 这样 { price: 50 } 就是阿尔卑斯州。

看到下面的笔有那个变化https://codepen.io/hugodf/pen/BaLERbe。

x-text 不适用于 Alpine JS 中的 <H4> 标签。为什么？

x-text is not working on <H4> tag in Alpine JS. Why?

alpine.js