questions and requirements: it is said that vue is data-driven, so for requirements similar to accordion (click on a li, to display the contents of the corresponding li, how can it be achieved through data-driven without operating dom? )
such as the following structure, click on the text in the corresponding li element to display, while the text in the other brothers"li is hidden.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><ul>
<li v-for="(el, idx) in list"
@click="() => triggerIdx = idx"
>{{idx === triggerIdx? el : '' }}</li>
</ul>
data () {
return {
list: [0,1,2,3],
triggerIdx: 0
}
}data-driven, to put it bluntly, is to use the data in ViewModel to control the style of DOM. Indirect operation of the DOM, upstairs code example is very clear
you can change data
to use v-if or dynamic: class control elements are visible
want to use vue2.0 to develop a small web application for the company, running on the mobile side. How can the above functions be achieved? ...
the company wants to do a background management system, and then different roles may correspond to different left menus, that is, a dynamic route, and everyone can see different things. I have seen the document of "Flower underpants " before, that is,...