Vue2 понимание: атрибут класса

Question

Итак, я смотрел vue2 учебник, когда я нашел этот кусок кода, который я не понимаю, почему и как он работает.

Вот стиль:

<style type="text/css"> 
    .is-loading { background: red } 
</style> 

и HTML:

<div id="root"> 
<button :class="{ 'is-loading': isLoading }" @click="toggleClass"> Toggle Me</button> 
</div> 

и вю код:

new Vue({ 
    el: '#root', 
    data: { 
     isLocading: false 
    }, 
    methods: { 
     toggleClass: function(){ 
      this.isLoading = !this.isLoading; 
     } 
    } 
}); 

Теперь этот код переключает имя класса для кнопки при но я не понимаю, это часть { 'is-loading': isLoading }, которая, похоже, не является тройным оператором.

Что именно это говорит? имя класса уже упоминается как is-loading, но после него появляется переменная.

Не должно ли это выглядеть как { variable ? 'class' ? 'no-class' }? Другими словами, должна ли переменная отображаться сначала, а затем класс?

Answer 1

У Vue.js есть возможности для работы Javascript expressions within all data-binding areas.

Это немного Vue.js магии происходит в фоновом режиме, но вы можете думать об этом, по существу, как это:

1. Вью видит : на class= задания привязки данных
2. Vue ищет, что находится внутри атрибута class=, и видит следующее: { 'is-loading': isLoading }
3. Vue отмечает, что это объект, поэтому он просматривает каждую пару ключ/значение и оценивает его, если значение (в этом случае) истинно, он добавляет ключ (is-loading) к атрибуту class, или нет, если значение false.

Vue CAN интерпретирует тройники в синтаксисе привязки данных, но это немного внутренняя манера Vue, которая позволяет вам легко создавать несколько вариантов состояния пользовательского интерфейса для компонента с минимальными усилиями.