Alpine Js x-text Example

In this section we will see how can we use x-text in alpine js. x-text is simply use for showing text data.


Example 1

Simple showing text message with x-text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alpinejs x-text</title>
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>

  <body style="margin: 200px">
    <div x-data="{message: 'Alpine js is awesome!'}">
        <p x-text="message"></p>
    </div>
  </body>
</html>
Alpine Js x-text v1

Alpine Js x-text v1



Example 2

Alpinejs x-text with click event.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alpinejs x-text</title>
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>

  <body style="margin: 200px">
    <div x-data="{ count: 0 }">
      <button @click="count++">Increment</button>

      <span x-text="count"></span>
      <button @click="count--">Decrement</button>
    </div>
  </body>
</html>


Example 3

Alpinejs 3 x-text with object.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alpinejs x-text</title>
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>

  <body style="margin: 200px">
    <div x-data="employee">
      <p x-text="name"></p>
      <p x-text="email"></p>
      <p x-text="age"></p>
    </div>

    <script>
      document.addEventListener('alpine:init', () => {
        Alpine.data('employee', () => ({
          name: 'John Doe',
          email: 'john@example.com',
          age: '25',
        }));
      });
    </script>
  </body>
</html>


Alpinejs 3 x-text with array & x-for loop.

<ul x-data="employee">
  <template x-for="person in people" :key="person.id">
    <li x-text="person.name"></li>
  </template>
</ul>
<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('employee', () => ({
      people: [
        { id: 1, name: 'Jhon' },
        { id: 2, name: 'nike' },
        { id: 3, name: 'sam' },
      ],
    }));
  });
</script>


Example 4

Alpinejs x-text with show and hide message with ternary operator.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alpinejs x-text with ternary operator</title>
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>

  <body style="margin: 200px">
    <div x-data="{ show: false}">
      <p x-text="show == true ? 'message is visible' : 'message is hide'"></p>
      <button @click="show=true">show message</button>
    </div>

  </body>
</html>


Much better

<div x-data="{ show: false}">
  <p x-text="show == true ? 'message is visible' : 'message is hide'"></p>
  <button @click="show=!show">show message</button>
</div>


Example 5

You can also use x-text in working click event button.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alpinejs x-text with ternary operator</title>
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>

  <body style="margin: 200px">
    <div x-data="{ show: false}">
      <p x-text="show == true ? 'message is visible' : 'message is hide'"></p>
      <button
        @click="show=!show"
        x-text="show == true ? 'hide message' : 'show message'"
      ></button>
    </div>
    
  </body>
</html>
Alpine Js x-text v3

Alpine Js x-text v3

Alpine Js x-text v4

Alpine Js x-text v4



Tags: