For HTML class bindings there are two syntax you can use:
Object syntax
<div :class="{ selected: isSelected }"></div>
The presence of the class will be determined by the truthiness of the data property used. The class binding is expecting the following type: { [key: string]: boolean }
or Record<string, boolean>
.
When using a template string (backticks) as an object property name, you need to wrap it in square brackets.
ie:
<div :class="{ [`${dynamicClassName}`]: true }"></div>
Array syntax
There is also the array syntax, which allows us to bind a list of classes.
<div :class="['selected', 'some-other-class']"></div>
We can use the object syntax in the array syntax like so:
<div :class="['some-class', { selected: isSelected }]"></div>
Using template strings:
<div :class="[`${dynamicClassName}`, { [`${dynamicClassName2}`]: isSelected }]"></div>
Edit:
Try the following if you want to use a template literal:
template: `
<div :class="'c-' + column">
....
<router-link :to="'/list/' + item.name"> test </router-link>
....
</div>
`,
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…