Can someone explain the distinction between class and staticClass in Vue.js render functions? While using Template Compilation, I noticed that the output varies based on what is provided to the HTML class attribute.
For instance, when passing a single string (e.g. 'foo'), it generates staticClass inside the data object:
<div class="foo"></div>
which compiles to:
function anonymous() {
with(this){return _c('div',{staticClass:"foo"})}
}
However, if we add a colon : (shorthand for v-bind) before the class attribute, it outputs class:
<div :class="'foo'"></div>
resulting in:
function anonymous() {
with(this){return _c('div',{class:'foo'})}
}
I am interested in knowing the difference between class and staticClass, and which one is preferred when creating custom render functions.
I have searched online but couldn't find a clear answer.
Thank you in advance.