Alpinejs x-if Statement Example

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/alpinejs@3.x.x/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/alpinejs@3.x.x/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

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/alpinejs@3.x.x/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/alpinejs@3.x.x/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>


Tags: