Как создать кнопку переключения в Vue.js

В этом кратком руководстве вы узнаете, как создавать различные типы кнопок-переключателей, например:

• Переключить один класс внутри одной кнопки
• Переключить два класса внутри одной кнопки
• Переключение одного класса между двумя разными кнопками

Переключить один класс внутри одной кнопки

В шаблоне Vue у меня есть простая кнопка с некоторыми классами Semantic UI CSS framework: кнопка переключения пользовательского интерфейса, которая предназначена только для визуальных целей.

<button class="ui button toggle">OFF</button>

На этом этапе кнопка имеет серый цвет фона, как на скриншоте ниже.

На этом этапе переключение класса active на кнопку изменит цвет фона с серого на зеленый и наоборот.

Довольно прямолинейно.

Для этого нам нужно иметь свойство с логическим значением, и при каждом нажатии кнопки нам нужно менять состояние этого свойства.

Исходя из этого, мы можем определить, когда активный класс должен быть добавлен к кнопке.

Давайте определим свойство с именем isActive внутри модели data().

export default {
  data() {
    return {
      isActive: false,
    };
  },
};

Затем прикрепите к кнопке событие щелчка, чтобы мы могли изменять состояние свойства isActive при каждом нажатии.

<button class="ui button toggle" @click="toggle">OFF</button>

Вызовите функцию обратного вызова toggle() внутри объекта методов.

Установите для свойства isActive значение true, если оно false, и наоборот.

Это можно сделать несколькими способами.

Наивный подход будет таким:

toggle() {
  if (!this.isActive) {
    this.isActive = true;
  } else {
    this.isActive = false;
  }
},

Причина, по которой я сначала проверяю, является ли this.isActive ложным, заключается в том, что это его начальное значение.

Но тернарный оператор сделал бы его менее загроможденным.

toggle() {
  this.isActive = this.isActive ? false : true;
},

Это хорошо, но мы все еще можем сделать это лучше.

toggle() {
   this.isActive = !this.enable;
},

Это выглядит красиво.

На самом деле вы можете добавить этот код в кнопку, как в коде ниже.

<button class="ui button toggle" @click="isActive = !isActive">OFF</button>

Переключить активный класс CSS

Основываясь на свойстве isActive, давайте переключим класс active в элементе кнопки, добавив объект в :класс.

<button class="ui button toggle" :class="{active:isActive}" @click="isActive = !isActive">OFF</button>

Класс active, который является ключом объекта, будет добавлен к кнопке, когда для isActive установлено значение true, которое является значением объекта.

Хороший.

Текст кнопки переключения

Давайте поменяем текст между OFF и ON в зависимости от значения свойства isActive.

<button
class="ui button big toggle"
:class="{active:isActive}"
@click="toggle"
>{{isActive ? 'ON' : 'OFF'}}</button>

Переключить два класса внутри одной кнопки

Допустим, вы хотите, чтобы кнопка имела красный цвет фона, когда она выключена, и зеленый, когда она включена.

В этом случае все, что нам нужно сделать, это добавить массив вместо объекта в :класс.

<button
  class="ui button big"
  :class="[isActive ? 'green' : 'red']"
  @click="toggle"
>{{isActive ? 'ON' : 'OFF'}}</button>

В этом массиве мы можем использовать тернарный оператор, чтобы поменять местами два класса на основе значения свойства isActive.

Переключить один класс между двумя кнопками

Допустим, у вас есть страница оплаты с двумя вариантами; либо оплатить кредитной картой или Paypal.

У меня есть две кнопки с некоторыми CSS-классами семантического пользовательского интерфейса, и я привязал событие щелчка к обеим с помощью функции обратного вызова, называемой toggle().

<div class="ui buttons big">
  <button
    class="ui button toggle"
    @click="toggle"
  >Credit Card</button>
  <button
    class="ui button toggle"
    @click="toggle"
  >Paypal</button>
</div>

Теперь объявите свойство с именем showCreditCard внутри модели data().

Затем изменяйте состояние свойства showCreditCard при каждом нажатии любой кнопки.

export default {
  data() {
    return {
      showCreditCard: true,
    };
  },
  methods: {
    toggle() {
      this.showCreditCard = !this.showCreditCard;
    },
  },
};

Если для свойства showCreditCard задано значение true, класс active будет добавлен к кнопке кредитной карты, в противном случае — к кнопке Paypal.

<div class="ui buttons big">
  <button
    class="ui button toggle"
    @click="toggle"
    :class="[showCreditCard ? 'active' : '']"
  >Credit Card</button>
  <button
    class="ui button toggle"
    @click="toggle"
    :class="[!showCreditCard ? 'active' : '']"
  >Paypal</button>
</div>

Вот оно!

Дайте мне знать, комментируя ниже, если вы хотите добавить что-то, чего не хватает в этой статье.

Удачного кодирования!