1. ความเข้าใจเกี่ยวกับ x-text

x-text เป็นคำสั่งใน Alpine.js ที่ใช้แสดงค่าจาก State หรือ ตัวแปร โดยจะแปลงค่าให้เป็นข้อความ (Text) และแทนที่เนื้อหาภายใน HTML Element ที่กำหนดไว้

• การใช้งานพื้นฐาน: <h1 x-text="message"></h1> คำสั่งนี้จะดึงค่าจากตัวแปร message ที่ถูกกำหนดใน x-data และแสดงใน <h1>

2. การใช้ x-text เพื่อแสดงข้อความจาก State

ตัวอย่างพื้นฐาน:

<div x-data="{ message: 'Hello, Alpine!' }">
    <h1 x-text="message"></h1>
</div>

การทำงาน:

• x-data="{ message: 'Hello, Alpine!' }" กำหนด State message
• x-text="message" แสดงข้อความ “Hello, Alpine!”

เมื่อโหลดหน้าเว็บ เนื้อหา <h1> จะถูกแทนที่ด้วยข้อความ “Hello, Alpine!”

3. การอัปเดตข้อความใน x-text

คุณสามารถอัปเดตข้อความใน State และเห็นการเปลี่ยนแปลงทันทีบนหน้าเว็บ:

<div x-data="{ message: 'Hello, Alpine!' }">
    <h1 x-text="message"></h1>
    <button @click="message = 'You clicked me!'">Change Text</button>
</div>

การทำงาน:

• เมื่อคลิกปุ่ม ค่า message จะเปลี่ยนเป็น “You clicked me!” และข้อความใน <h1> จะอัปเดตตาม

4. การใช้ JavaScript Expressions ใน x-text

x-text รองรับการเขียน JavaScript Expressions เพื่อปรับแต่งข้อความ เช่น:

<div x-data="{ name: 'John', age: 25 }">
    <h1 x-text="'Name: ' + name"></h1>
    <h2 x-text="'Age: ' + age"></h2>
</div>

การทำงาน:

• ค่าจาก State name และ age จะถูกใช้ในข้อความ
• แสดงผล: Name: John Age: 25

5. การใช้ x-text กับ State ที่ซับซ้อน

ตัวอย่าง: การใช้ Object

<div x-data="{ user: { name: 'Alice', role: 'Admin' } }">
    <h1 x-text="user.name"></h1>
    <h2 x-text="'Role: ' + user.role"></h2>
</div>

ตัวอย่าง: การใช้ Array

<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
    <h1 x-text="items[0]"></h1> <!-- แสดง 'Apple' -->
</div>

6. การแสดงข้อความที่เปลี่ยนแปลงตาม Event

ตัวอย่าง: แสดงข้อความจากการคลิกปุ่ม

<div x-data="{ message: 'Click the button!' }">
    <h1 x-text="message"></h1>
    <button @click="message = 'Button clicked!'">Click Me</button>
</div>

การทำงาน:

• ค่า message จะเปลี่ยนตาม Event

7. ข้อแตกต่างระหว่าง x-text และการใช้ข้อความปกติใน HTML

การใช้ข้อความปกติ:

<h1>Hello, Alpine!</h1>

• Static Content: เนื้อหาจะไม่เปลี่ยน

การใช้ x-text:

<h1 x-text="message"></h1>

• Dynamic Content: เนื้อหาจะเปลี่ยนตาม State

8. ข้อควรระวังเมื่อใช้ x-text

• x-text จะ แทนที่ข้อความทั้งหมด ภายใน Element
• ไม่สามารถใช้เพื่อแสดง HTML Code หากต้องการแสดง HTML ใช้ x-html แทน

สรุป

ในบทนี้ คุณได้เรียนรู้วิธีแสดงค่าจาก State ด้วย x-text ทั้งในรูปแบบพื้นฐานและแบบ Dynamic พร้อมตัวอย่างการใช้งานในสถานการณ์ต่างๆ ในบทถัดไป เราจะพูดถึง x-html ซึ่งใช้สำหรับแสดงเนื้อหา HTML ภายใน Element!