Alpine JS x-if Condition Example Tutorial

Hi Guys,

Today, in this article I will learn something new how to use x-if condition statement in alpine JS you can easliy make x-if condition statement with alpine JS.

So, basically it can be use this example in your php laravel alpine js project.

If you optate to optically discern example of alpine Js x-if condition verbalization i will show you bellow step by step how you can engender it and how it works, so let's optically discern step by step explication.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Alpine JS x-if Condition Example Tutorial - CodingTracker</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
  <style type="text/css">
    body{
      padding: 50px;
      background-color: #d3e1ed;
    }
  </style>
</head>
<body>
  <div class="container">
    <h4>Alpine JS x-if Condition Example Tutorial - CodingTracker</h4>
    <hr class="mb-2">
    <div x-data="{ status: '' }">
      <p><strong>Change Product Status By Clicking Button</strong></p>
      <button @click="status = 'active'" class="btn btn-success">Active</button>
      <button @click="status = 'inactive'" class="btn btn-danger">InActive</button>
      <template x-if="status == 'active'">
        <p class="mt-2">Product is active.</p>
      </template>
      <template x-if="status == 'inactive'">
        <p class="mt-2">Product is inactive.</p>
      </template>
    </div>
  </div>
</body>
</html>

It Will Help You..

Lara Tuto

Post a Comment