了解Vue.js CSS類綁定順序

Question

誰能幫助我了解如何控制組件根元素css類以及可能與調用該組件的父對象綁定的任何css類的順序？

這是描述我所注意的小提琴（下面的片段示例）： https : //jsfiddle.net/cicsolutions/b6rnaw25/

您會注意到，如果您的組件的根元素上有一個類，如果該類是字符串，則Vue的類綁定會將類放在結果綁定的類列表的開頭。 這是我所期望的，因為組件設置了基本的CSS類，然后在使用組件時可以通過將類添加到組件html元素中來自定義樣式。 然后，Vue將這些類綁定/合並在一起。

在小提琴中的下一個示例中，我展示了動態css類的使用（即，不是靜態字符串）。 在這些情況下，Vue將組件的根元素類放在綁定的類列表的末尾。

我正在開發一個希望其他人使用的組件，所以我想將我的組件類設置在root元素上，然后，如果有人想覆蓋這些樣式，他們可以在自己的組件標簽上添加自己的類。

我還需要根元素類是動態的，因此我必須使用數組或對象來處理類綁定。

有誰知道為什么Vue在靜態類的開頭和動態類的末尾放置組件根css類？ 這對我來說似乎很奇怪，但是也許出於某種原因是故意的。

但是，當我需要將其作為動態類時，如何確保組件的根元素類始終在結果綁定類列表中排在首位？

 Vue.directive('bound-class', (el) => { const boundClass = el.attributes.class.nodeValue const boundClassPrintout = document.createElement('div') boundClassPrintout.innerHTML = 'Resulting Bound Class: ' + boundClass el.appendChild(boundClassPrintout) }); // STATIC CSS CLASS -> becomes 1st class in bound class list (expected) Vue.component('string-test', { template: `<div class="string-class" v-bound-class><slot></slot></div>` }); // DYNAMIC CSS CLASS -> becomes last class in bound class list (unexpected) Vue.component('array-test', { template: `<div :class="['array-class']" v-bound-class><slot></slot></div>` }); // DYNAMIC CSS CLASS -> becomes last class in bound class list (unexpected) Vue.component('object-test', { template: `<div :class="{ 'object-class': true }" v-bound-class><slot></slot></div>` }); new Vue({ el: "#app", computed: { vueVersion() { return Vue.version } } }) 

 body { background: #20262E; padding: 20px; } #app { background: #fff; border-radius: 4px; padding: 20px; } h2 { margin-bottom: 0.75rem; } 

 <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Vue version: {{ vueVersion }}</h2> <string-test class="p-2 mb-2 border">Root class (string-class) at beginning (expected)</string-test> <array-test class="p-2 mb-2 border">Root class (array-class) at end (unexpected)</array-test> <object-test class="p-2 mb-2 border">Root class (object-class) at end (unexpected)</object-test> </div> 

Answer 1

我懷疑Vue首先插入靜態類沒有特別的原因。 可能只是鏡像renderClass函數中輸入參數的renderClass 。

CSS文件中規則集的順序也很重要。 類名稱在元素的class屬性中的順序不正確。 而且這兩個順序都與級聯無關， 級聯是指子元素從其父級繼承樣式。 也許您已經將其與塊內或內聯樣式中的聲明順序混淆了。 在這種情況下，順序很重要：

<p class="red blue">
    Order doesn't matter in the class attribute above. If
    the class styles contradict, whichever is defined last
    will win regardless of how they're ordered in the attribute.
</p>

<p class="blue red">
    This paragraph will be styled identically to the previous
    one, despite the change in class order.
</p>

<p style="color: red; color: blue">
    Order does matter here. The text color will be blue.
</p>