[Vuejs]-How to display and hide the underline based on user clicks?

by

2👍

✅

You could just toggle a class.

<template>
  <h5 class="signin"
    :class="{ active: isLogin }"
    @click="isLogin = true">Login</h5>
  <h5 class="signup"
    :class="{ active: !isLogin }"
    @click="isLogin = false">signup</h5>
  <div class="pass">
    <p>Password</p>
    <input :type="password_type" class="password" :class="{ 'password-visible': isPasswordVisible }" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$" required>
    <i class="bi bi-eye-slash" id="togglePassword" @click="togglePassword();">Toggle</i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      password_type: 'password',
      isPasswordVisible: false,
    }
  },
  methods: {
    togglePassword() {
      this.password_type = this.password_type === 'password' ? 'text' : 'password'
      this.isPasswordVisible = !this.isPasswordVisible
    },
  }
}
</script>

<style>
.signup{
  /* 
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style:solid;
  text-decoration-thickness: 5px;
  */
}

.signin.active,
.signup.active {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: solid;
  text-decoration-thickness: 5px;
}

.password-visible {
  margin: 0px 0px 0px 69px;
  width: 252px;
  height: 35px;
}
</style>
👤LSE

1👍

You can use Javascript but I think it is time for you to use Jquery
And you can explore more on Vue cause I think frameworks has some code that is made for that. (acivite links etc.)

h5{
  cursor:pointer;
}
.active{
  text-decoration: underline;
  color: red;
}
<script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <div class="headings">
      <h5 class="signin active">Login</h5>
      <h5 class="signup">signup</h5>
    </div>

    <script>
      // script for active links styling
      $(function () {
        $(".headings h5").on("click", function () {
          $(this).parent().find("h5.active").removeClass("active");
          $(this).addClass("active");
        });
      });
    </script>
👤Jerwin Mathew Aton

Leave a comment