Тернарный оператор в Vue

В предыдущей статье Условия if, else-if else в Vue мы рассмотрели способ программирования простейшей логике на примере, где скрывается пункт списка при нажатии на него. Как можно заметить, такой способ скрытия пунктов невсегда оправдан. Лучше сделать отдельную кнопку, при нажатии на которую пункт будет пропадать. Поэтому изменим предыдущий примеру, используя директиву "v-on:click", чтобы сделать кнопку:

<div id="application">
   <div>
      <span v-on:click="ChangeState">Скрыть/показать</span>
      <span v-if="show">Мышь</span>
   </div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         show: true
      },
      methods: {
         ChangeState: function() {
            if( this.show ) { // скрыть, если показано
               this.show = false;
            }else{ // показать, если скрыто
               this.show = true;
            }
         },
      },
   });
</script>

Если запустить такой код, то на странице будет выведено две надписи "Скрыть/показать" и "Мышь". Кликните левой кнопкой мыши на "Скрыть/показать" и пункт "Мышь" скроется. Если кликнуть ещё раз, то он появится. За такое поведение отвечает метод "CahngeState" (перевод с англ. - "ИзменитьСостояние"). Он меняет значение настройки "data", свойства "show" с "true" на "false" и обратно.

Подобные кнопки, которые скрывают/показывают элементы, часто используются на интерактивных сайтах. К сожалению, в нашем примере никак не изменяется надпись на кнопке "Скрыть/показать", что портит дизайн. Идеально было бы показывать надпись "Скрыть", когда элемент показан, и "Показать", когда он скрыт. Давайте сделаем это используя так называемый "тернарный оператор". Заодно и чуть упростим код условия внутри функции "CahngeState", потому что сейчас он слишком громоздкий:

<div id="application">
   <div>
      <span v-on:click="ChangeState">
         {{ show ? 'Скрыть' : 'Показать' }}
      </span>
      <span v-if="show">Мышь</span>
   </div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         show: true
      },
      methods: {
         ChangeState: function() {
            this.show = !this.show;
         },
      },
   });
</script>

Первым из кода бросается в глаза конструкция, которая стоит внутри элемента с директивой "v-on:click". Это и есть тернарный оператор. То есть в зависимости от значения логической переменной "show" на кнопке будет виден текст "Скрыть" или "Показать".

Второе заметное изменение - это отсутствие оператора "if" внутри функции "ChangeState". Так как переменная "show" логическая, то у неё есть всего два значения, что позволяет написать этот участок кода без условий, а лишь с отрицанием.