如何在 alpine js 中获取动态文本值？

Question

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<p @click="printThisTextToSpan">Name one</p>
<p @click="printThisTextToSpan">Name two</p>
<p @click="printThisTextToSpan">Name three</p>


<span ></span>

我的问题是当我点击 p 标签时如何打印 p 标签文本以跨越？

Answer 1

看了一眼documentation，我明白了

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ text: '' }">
    <p @click="text = $el.textContent">Name one</p>
    <p @click="text = $el.textContent">Name two</p>
    <p @click="text = $el.textContent">Name three</p>
 
    <span x-text="text"></span>
</div>

要使用函数，您需要更多代码

https://codewithhugo.com/alpinejs-magic-property-access/

如何在 alpine js 中获取动态文本值？

How to get dynamic text value in alpine js?

html

javascript

css

alpine.js