Vue.js 將類綁定到組件模板

Question

我希望能夠根據條件將 class 綁定到我的組件模板，但也應用始終存在的默認 class。

到目前為止，這是我的代碼，當滿足條件但未應用 event_month class 時，我能夠讓它應用 currentMonth class。 我使用正確的語法嗎？

 const listTemplate = '' + '<div class="list_body">' + '<div v-for="(month, index) in months" v-bind:class="[event_month, {current: index === currentMonth}]">' + '{{month}}' + '</div>' + '</div>'; Vue.component('events-list-view', { template: listTemplate, data() { return { months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], currentMonth: new Date().getMonth(), }; }, }); new Vue({ el: "#app" });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <events-list-view /> </div>

Answer 1

只需將event_month修改為\'event_month\' ：

const listTemplate = '' +
'<div class="list_body">' +
    '<div v-for="(month, index) in formattedEvents" v-if="month.length" v-bind:class="[\'event_month\', {current : index === currentMonth}]">' +
    '</div>' +
'</div>';

event_month被編譯為實例屬性。

Answer 2

在上面的代碼中，您將 event_month 綁定到所有 12 個 div 節點，但其中只有一個將與當前 class 綁定。

但是您的問題不清楚，請您詳細說明。