Встроенная рендеринг условного текста и значков с помощью Vue

Официальная документация Vue описывает один метод условного рендеринга компонентов с использованием v-if, v-else-if и v-else. В этой статье я представлю альтернативный метод, который можно использовать для условного рендеринга текста или значков.

Стандартное решение

<template>
  <p v-if="2+2 == 4">
    Hello
  </p>
  <p v-else>
    Goodbye
  </p>
</template>

Здесь «Hello» отображается, когда условие, указанное в v-if, оценивается как true. В противном случае отображается сообщение «До свидания». Этот синтаксис чрезвычайно распространен и официально рекомендован Vue.

Альтернатива

Часто в качестве альтернативы я использую синтаксис усы Vue в сочетании с тернарным оператором JavaScript для условного рендеринга текста или значков.

<template>
  <p>
    {{ 2+2 == 4 ? 'Hello' : 'Goodbye' }}
  </p>
</template>

Приведенный выше код отображает Hello, так как 2+2==4 соответствует действительности. Тот же принцип можно использовать для условного рендеринга значков.

<template>
  <v-icon>
    {{ 2+2 == 5? 'mdi-edit' : 'mdi-delete' }}
  </v-icon>
</template>

В приведенном выше примере будет отображаться значок mdi-delete, поскольку 2+2==5 является ложным. Этот метод использует тернарный оператор для упрощения операторов if-else. В общем, синтаксис тернарного оператора JavaScript выглядит следующим образом:

condition ? expressionOne : expressionTwo;

В приведенном выше примере expressionOne оценивается, когда условие истинно, а expressionTwo оценивается, когда условие ложно. Мы можем использовать тернарный оператор внутри усов, чтобы писать условные операторы в одной строке.

Вот простой рабочий пример программы:

<template>
  <div>
    <h1>
      {{ isOn ? 'On' : 'Off' }}
    </h1>
    <button @click="isOn = !isOn">
      {{ isOn ? 'click to turn off' : 'click to turn on' }}
    </button>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data: function() {
      return {
        isOn: true,
      };
    }
  }
</script>

В простых случаях этот подход может сократить код и повысить его читабельность.