Vue2瞭解：class屬性

所以，我在看vue2教程，當時我發現了這段代碼，我不明白爲什麼以及它是如何工作的。Vue2瞭解：class屬性

這是一種風格：

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

和HTML：

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

和VUE代碼：

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

現在，這個代碼切換的類名按鈕時點擊，但我不明白的是{ 'is-loading': isLoading }部分，它似乎不是一個三元運算符。

究竟是什麼意思？班級名稱是已經首先提到is-loading但變量出現在它之後。

換句話說，這看起來不像{ variable ? 'class' ? 'no-class' }，不應該先出現變量，那麼類？

來源

2017-02-15 user7342807

如果** isLoading === true ** – Fals

我知道if'isLoading === true'是否會添加類，但是爲什麼它會按照它的順序出現？ – user7342807

訂單中顯示了什麼？那個東西是什麼？ ** {'is-loading'：isLoading} **是一個對象，：class只檢查屬性是否爲true，然後將它的名稱，類應用於元素。 – Fals

Vue.js有能力運行Javascript expressions within all data-binding areas。

這是Vue.js魔法一點點在後臺發生的事情，但你基本上可以認爲它是這樣的：

Vue公司看到:上class=指定數據綁定
Vue公司看看class=屬性裏面有什麼，並看到以下內容：{ 'is-loading': isLoading }
Vue注意到它是一個對象，因此如果值（在本例中爲isLoading）爲真，則遍歷每個鍵/值對並對其進行評估，它添加了密鑰（is-loading）轉換爲class屬性，如果值爲false，則不轉換。

Vue可以解釋數據綁定語法中的三元組，但這是Vue的一些內在魔力，它允許您輕鬆地爲組件創建多個UI狀態變體。

來源

2017-02-16 01:30:15 K3TH3R

我還是不明白。爲什麼這個特定的代碼從右到左評估？ I – user7342807

從技術上來說，這並不是從右到左的評估。 Vue認爲它是一個類屬性中的JS對象，所以它標識了關鍵字「is-loading」，然後通過查看值isLoading來詢問如何處理它。 – K3TH3R

我現在明白了這一點。這似乎有點奇怪，但這也意味着你不能設置一個類名稱，假設它的值爲'false'，因爲如果它是假的，vue會隱藏所有的東西。 – user7342807

Vue2瞭解：class屬性

回答

相關問題