First, go straight to the topic. I want to bind multiple classes to a dom, and it is dynamically bound. At this time, you can use the abbreviation of v-bind to be written as ":" colon. I checked the official syntax.
The details are as follows:
<!-- class Bind -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
Line 2 and line 3 both use array syntax, so this is what I wrote in my own code
<a :class="[{ active : hash==='all' }, nav-link]" href="#/all" rel="external nofollow" >All tasks</a>
Unfortunately, it has no use. The nav-link class here is fixed and will not change. The active class needs to be judged based on the conditions to determine whether to join.
Later, I checked a lot of information but failed to solve it. In the end, I successfully wrote my own object. I have seen cases that have not been resolved online, so I shared it.
The details are as follows:
<a :class="{ 'active': hash==='finish','nav-link':true}" href="#/finish" rel="external nofollow" >Completed</a>
If you have any questions, you can ask them in the comments or if I have any mistakes, you can also say them.
The above article quickly solves the problem of invalid syntax of the official example of Vue dynamically binding multiple classes. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.