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/[email protected]/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
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/[email protected]/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/[email protected]/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: '[email protected]',
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/[email protected]/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/[email protected]/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 v4
