vue achieve selected effects

Recap

Long time no write Vue, and slightly strange, this thing is much more useful.
Afternoon saw a demand, select the album chart picture shows a carousel. Interface return to the album list, the user choose it over and then throw it back.
Until I saw e.target.classNameI know that this matter is not simple. .

Vue is a data-driven

The data driver this is what I feel and jQuerynot the same place.
jQueryA tap, add class, move more class.
VueWhat is the point, data logging, and then automatically notify view.
One is saved in the selected state DOM, the selected one is stored in the js数据模型inside.
So to see the use Vuethen get DOMchanged classbehavior, I stopped him in time. Saying you volunteer your time to Vuedoing. . .

Data-driven ideas together before and what will happen?

It is a data-driven view of data to process, if you only change the view does not change the data. He then refresh it in other places, it may lead to the view of sync. For example, when writing to write, then it is possible to read when reading out is not the same, why is this so? Because there are two places you can change it, Vue the DOM deleted, do not you write a new rendering of the state, when read read ghost. Think about this a luck thing, you can Haoshi it?

Vue how to achieve this effect

Said so much nonsense, first on the address bar, Portal - DEMO I wrote
the following simple talk about three kinds of writing ideas

1. Id made of a selected array, and more to maintain a queue. :class="{selected: ~checkSelect(item.id)}"Rendering time to determine that there are an array of id no.
2. Id made of a selected target, to maintain a multi-object. :class="{selected: selectList[item.id]}"And compared to the previous object, then, idas a keylook up a lot of convenience. Here we must note that .$set, draw the focus to the exam.
3. Directly change the original object, one more parameter. This not very recommended.

When I finished writing the code, writing articles, the demand had changed. Uncomfortable. . . . To change the code. . . .
When I finished writing the code, writing articles, the demand had changed. Uncomfortable. . . . To change the code. . . .
When I finished writing the code, writing articles, the demand had changed. Uncomfortable. . . . To change the code. . . .