In this section we will see alpine js if statement also we will show how we can use else statement using (=!) not equal to. In alpinjs you can use only if statement in template div.
Example 1
Simple use of x-if statement.
<!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 if statement Example</title>
<script
defer
src="https://unpkg.com/[email protected]/dist/cdn.min.js"
></script>
</head>
<body style="margin: 200px;">
<div x-data ="{show:true}">
<template x-if="show">
<div>Show Data if true</div>
</template>
</div>
</body>
</html>
Example 2
If statement with click event.
<div x-data="{show:false}">
<template x-if="show">
<div>Show Data if true</div>
</template>
<button @click="show=false">Click</button>
</div>
Better way
<div x-data="{show:false}">
<template x-if="show">
<div>Show Data if true</div>
</template>
<button @click="show=!show">Click</button>
</div>
Example 3
In alpine js there is no else statement. But we perform operation else using (=!) not equal to
<!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 if else statement Example</title>
<script
defer
src="https://unpkg.com/[email protected]/dist/cdn.min.js"
></script>
</head>
<body style="margin: 200px">
<div x-data="{show:false}">
<template x-if="show">
<div>Show Data if true</div>
</template>
<template x-if="!show">
<div>Show Data if false</div>
</template>
</div>
</body>
</html>
Alpinejs x-if Statement v1
Example 4
if else 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 if else statement Example</title>
<script
defer
src="https://unpkg.com/[email protected]/dist/cdn.min.js"
></script>
</head>
<body style="margin: 200px">
<div x-data="{show:false}">
<template x-if="show">
<div>Show Data if true</div>
</template>
<template x-if="!show">
<div>Show Data if false</div>
</template>
<button @click="show=!show">Click</button>
</div>
</body>
</html>
Note: You can use x-show directive. x-show is much simple and easy to use, you can see same example in below.
<!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-show</title>
<script
defer
src="https://unpkg.com/[email protected]/dist/cdn.min.js"
></script>
</head>
<body style="margin: 200px">
<div x-data="{show:false}">
<div x-show="show">
<div>Show Data if true</div>
</div>
<div x-show="!show">
<div>Show Data if false</div>
</div>
<button @click="show=!show">Click</button>
</div>
</body>
</html>
