关于vue数据驱动的问题？

Question

问题与需求：都说vue是数据驱动，那么对于类似于手风琴的需求（通过点击某个li，展示对应li里面的内容，在不操作dom的情况下如何通过数据驱动达成呢？）

比如以下结构，点击对应的li元素其里面的文本显示，同时其他兄弟li里的文本隐藏。

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ul>

Answer 1

<ul>&nbsp; &nbsp;<li v-for="(el, idx) in list"&nbsp; &nbsp; &nbsp; &nbsp;@click="() => triggerIdx = idx"&nbsp; &nbsp;>{{idx === triggerIdx? el : '' }}</li></ul>data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; list: [0,1,2,3],&nbsp; &nbsp; &nbsp; &nbsp; triggerIdx: 0&nbsp; &nbsp; }}

Answer 2

数据驱动，说白了，就是利用ViewModel里面的数据，来控制DOM的样式，间接的操作DOM，楼上代码示例很清晰明了

Answer 3

可以通过更改data使用v-if 或者动态:class控制元素可视